import {
  FilterButtonGroup,
  FilterField,
  FilterFieldWrapper,
  FilterSelect,
} from '@components';
import {Card} from 'antd';
import {FC, useLayoutEffect} from 'react';
import {
  useContextSection,
  useFilterField,
  useTableSearchToolEvents,
} from '@hooks';
import {context, searchContext} from '../context';
import {useDicionaryType} from '../hooks';

const options = [
  {label: '原材料仓库', value: '0'},
  {label: '半成品仓库', value: '1'},
  {label: '产成品仓库', value: '2'},
];

const Filter: FC = function () {
  const type = useDicionaryType();
  const [{name, code, warehouseType}, {onChange, resetState}] = useFilterField(
    {name: '', code: '', warehouseType: ''},
    true,
  );
  const {isSearching} = useContextSection(searchContext, state => state[0]);
  const [, {onSearch, onReset}] = useTableSearchToolEvents(
    context,
    {name, code, warehouseType},
    {resetCallback: resetState},
  );
  useLayoutEffect(
    function () {
      onReset();
    },
    [type, onReset],
  );

  return (
    <Card>
      <FilterFieldWrapper onSearch={onSearch} testId='dictionary_filter'>
        <FilterField
          name='dictionaryCode'
          label='编号'
          value={code}
          onChange={onChange('code')}
        />
        <FilterField
          name='dictionaryName'
          label='名称'
          value={name}
          onChange={onChange('name')}
        />
        {type === '仓库' && (
          <FilterSelect
            label='仓库类型'
            name='warehouseType'
            value={warehouseType}
            onChange={onChange('warehouseType')}
            options={options}
          />
        )}
        <FilterButtonGroup
          isSearching={isSearching}
          onSearch={onSearch}
          onReset={onReset}
        />
      </FilterFieldWrapper>
    </Card>
  );
};

export default Filter;
