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

const disableOptions = [
  {label: '全部', value: ''},
  {label: '启用', value: '1'},
  {label: '禁用', value: '0'},
];

const Filter: FC = function() {
  const [fields, onChange] = useField();
  const {code, name, type, isNotDisable} = fields;
  const onSearch = useSearch(fields);
  const [isExporting, onExport] = useExport();
  const isSearching = useContextSection(context, state => state[0].isSearching);

  return (
    <Card>
      <Space direction='vertical' className='width-full' size='middle'>
        <Row>
          <FilterField name='storageCode' label='库位编号' value={code} onChange={onChange('code')} />
          <FilterField name='storageName' label='库位名称' value={name} onChange={onChange('name')} />
          <FilterField name='storageType' label='库位类型' value={type} onChange={onChange('type')} />
          <FilterSelect
            name='storageState'
            label='状态'
            value={isNotDisable}
            onChange={onChange('isNotDisable')}
            options={disableOptions}
          />
        </Row>
        <Row>
          <FilterButtonGroup
            isSearching={isSearching}
            isExporting={isExporting}
            onSearch={onSearch}
            onExport={onExport}
            disableAlign
          />
        </Row>
      </Space>
    </Card>
  );
};

export default Filter;
