import {Modal, FilterGroupMap} from '@components';
import {Transfer} from 'antd';
import {FC} from 'react';
import {useTransfer} from './hooks';
import icon from '@assets/images/dialog/filter.svg';

type Props = {
  visible: boolean;
  onClose: () => void;
  filtermap: FilterGroupMap<any>;
  onConfirm: (value: string) => void;
  source: string;
};

const FilterSelectorModal: FC<Props> = function ({
  visible,
  onClose,
  filtermap,
  onConfirm,
  source,
}) {
  const [{dataSourece, selected}, {onChange, onSubmit}] = useTransfer(
    filtermap,
    source,
    {
      onConfirm,
      onClose,
    },
  );

  return (
    <Modal
      title='选择筛选条件'
      visible={visible}
      onClose={onClose}
      height='480px'
      width='580px'
      onSubmit={onSubmit}
      icon={icon}
      testId='filter_select_modal'
    >
      <div className='flex-center'>
        <Transfer
          dataSource={dataSourece}
          targetKeys={selected}
          titles={['未选', '已选']}
          rowKey={item => item.id}
          render={item => item.label}
          onChange={onChange}
        />
      </div>
    </Modal>
  );
};

export default FilterSelectorModal;
