import {FilterButtonGroup, FilterField, FilterSelect} from '@components';
import {Card, Row} from 'antd';
import {FC} from 'react';
import {useExport, useField, useSearch} from './hooks';
import {useDepartmentOptions, useTableSearch} from '@hooks';
import {searchContext} from '../context';

const Filter: FC = function() {
  const [{name, department, type}, onChange] = useField();
  const options = useDepartmentOptions(true);
  const onSearch = useSearch({name, department, type});
  const [isSearching] = useTableSearch(searchContext);
  const [isExporting, onExport] = useExport();

  return (
    <Card>
      <Row>
        <FilterField name='containerName' label='容器名称' value={name} onChange={onChange('name')} />
        <FilterField name='containerType' label='容器类型' value={type} onChange={onChange('type')} />
        <FilterSelect
          name='containerNameDepartment'
          label='所在部门'
          value={department}
          onChange={onChange('department')}
          options={options}
        />
        <FilterButtonGroup
          onSearch={onSearch}
          isSearching={isSearching}
          onExport={onExport}
          isExporting={isExporting}
        />
      </Row>
    </Card>
  );
};

export default Filter;
