import React, { FC } from 'react';
import { Tabs, TabsProps } from 'antd'
import BoxPanel from './components/boxPanel';
import type { BoxPanelProps } from './components/boxPanel';

export interface BoxSelectTreeProps extends BoxPanelProps {
  onTabChange?: (e: any) => void
  tabsProps?: TabsProps
}

const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
  const {
    data,
    boxDataSource = [],
    onTabChange,
    onSearch,
    onItemCheck,
    onItemSelect,
    onBoxBatchDelete,
    onBoxDelete,
    onCreateSubmit,
    onClockClick,
    onImport,
    onCreate,
    tabsProps,
    searchInputProps,
    treeProps,
    customImport,
    showOptions,
    extraBtns,
  } = props

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: <div style={{ textAlign:'center', width: '160px' }} >盒子</div>,
    },
    {
      key: '2',
      label: <div style={{ textAlign:'center', width: '160px' }} >盒子组</div>,
    },
  ];

  return (
    <div className='box-select-tree'>
      <Tabs
        defaultActiveKey="1"
        centered
        items={items}
        onChange={onTabChange}
        tabBarGutter={0}
        indicator={{ size: (origin) => origin, align: 'center' }}
        {...tabsProps}
      />
      <BoxPanel
        searchInputProps={searchInputProps}
        boxDataSource={boxDataSource}
        treeProps={treeProps}
        data={data}
        onCreate={onCreate}
        onCreateSubmit={onCreateSubmit}
        onBoxBatchDelete={onBoxBatchDelete}
        onBoxDelete={onBoxDelete}
        onSearch={onSearch}
        onItemCheck={onItemCheck}
        onItemSelect={onItemSelect}
        showOptions={showOptions}
        customImport={customImport}
        extraBtns={extraBtns}
        onClockClick={onClockClick}
        onImport={onImport}
      />
    </div>
  );
};

export default BoxSelectTree;