import React, { FC, useState } from 'react';
import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd';
import TreeTransfer from '../treeTransfer';
import { TreeTransferProps } from '../treeTransfer'

export interface TreeTransferModalProps {
  dataSource: TreeDataNode[]
  treeProps?: TreeProps
  targetItems: TreeDataNode[];
  checkedKeys: string[];
  onTreeSelect?: TreeProps['onSelect']
  onTreeCheck?: TreeProps['onCheck']
  onItemDelete?: TreeTransferProps['onItemDelete']
  onChange?: TransferProps['onChange'];
  onOk?: (data: any) => void;
  onReset?: () => void;
  open?: boolean
  onCancel?: ModalProps['onCancel']
  onRadioChange?: RadioGroupProps['onChange']
  onSelect?: SelectProps['onSelect']
  modalProps?: ModalProps
  radioProps?: RadioGroupProps
  selectProps?: SelectProps
}

const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
  const {
    open,
    dataSource = [],
    checkedKeys,
    onItemDelete,
    onOk,
    onCancel,
    onReset,
    onRadioChange,
    onTreeCheck,
    onSelect,
    targetItems,
    modalProps,
    radioProps,
    selectProps,
  } = props

  const [type, setType] = useState('1')

  return (
    <Modal
      open={open}
      destroyOnClose
      title="统计点位"
      width="948px"
      footer={null}
      onCancel={onCancel}
      {...modalProps}
    >
      <div>
        <div>
          <Radio.Group
            onChange={e => {
              setType(e.target.value)
              onRadioChange?.(e)
            }}
            style={{ marginLeft: '24px', padding: '20px 0' }}
            value={type}
            options={[
              { value: '1', label: '盒子' },
              { value: '2', label: '盒子组' }
            ]}
            {...radioProps}
          />
          <Select
            defaultValue={''}
            style={{ marginLeft: 200, width: 150 }}
            options={[
              { value: '', label: '全部' }
            ]}
            onSelect={onSelect}
            {...selectProps}
          />
        </div>
        {type === 'box' ?
          (
            <TreeTransfer
              dataSource={dataSource}
              targetItems={targetItems}
              checkedKeys={checkedKeys}
              onTreeCheck={onTreeCheck}
              onItemDelete={onItemDelete}
              onOk={onOk}
              onReset={onReset}
            />
          ) : (
            <TreeTransfer
              dataSource={dataSource}
              targetItems={targetItems}
              checkedKeys={checkedKeys}
              onTreeCheck={onTreeCheck}
              onItemDelete={onItemDelete}
              onOk={onOk}
              onReset={onReset}
            />
          )}
        <p style={{ textAlign: 'right' }} >已选中{targetItems.length}个点位</p>
      </div>
    </Modal>
  )
};

export default TreeTransferModal;