import React, { FC } from 'react';
import { InputProps, Tabs, TabsProps, TreeDataNode, TreeProps } from 'antd'
import BoxPanel from './components/boxPanel';
import { ModalFormProps } from '@ant-design/pro-components';

export interface BoxSelectTreeProps {
  boxDataSource: TreeDataNode[]
  data: TreeDataNode[]
  onSearch?: (e: any) => void       // 搜索
  onItemSelect?: TreeProps['onSelect']
  onItemCheck?: TreeProps['onCheck']
  onTabChange?: (e: any) => void
  onBoxBatchDelete?: (data?: any) => void
  onBoxDelete?: (data?: any) => void
  onCreateSubmit?: ModalFormProps['onFinish']
  tabsProps?: TabsProps
  searchInputProps?: InputProps
  treeProps?: TreeProps
}

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

  const onChange = (key: string) => {
    onTabChange?.(key)
  };

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: <div style={{ textAlign:'center', width: '160px' }} >盒子组</div>,
      children: (
        <BoxPanel
          searchInputProps={searchInputProps}
          boxDataSource={boxDataSource}
          treeProps={treeProps}
          data={data}
          onCreateSubmit={onCreateSubmit}
          onBoxBatchDelete={onBoxBatchDelete}
          onBoxDelete={onBoxDelete}
          onSearch={onSearch}
          onItemCheck={onItemCheck}
          onItemSelect={onItemSelect}
        />
      )
    },
    {
      key: '2',
      label: <div style={{ textAlign:'center', width: '160px' }} >盒子</div>,
      children: (
        <BoxPanel
          boxDataSource={boxDataSource}
          searchInputProps={searchInputProps}
          treeProps={treeProps}
          data={data}
          onBoxBatchDelete={onBoxBatchDelete}
          onCreateSubmit={onCreateSubmit}
          onBoxDelete={onBoxDelete}
          onSearch={onSearch}
          onItemCheck={onItemCheck}
          onItemSelect={onItemSelect}
        />
      )
    },
  ];

  return (
    <Tabs
      defaultActiveKey="1"
      centered
      items={items}
      onChange={onChange}
      tabBarGutter={0}
      indicator={{ size: (origin) => origin, align: 'center' }}
      {...tabsProps}
    />
  );
};

export default BoxSelectTree;