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

const Filter: FC = function () {
  const [fields, {onChange, resetState}] = useFilterField(
    {
      wllbCodes: '',
      storageLocationCodes: '',
      name: '',
      storageLocationName: '',
    },
    true,
  );
  const uuid = useContextSection(context, state => state[0].uuid);
  const [, {onSearch, onReset}] = useTableSearchToolEvents(
    context,
    {...fields, uuid},
    {
      resetCallback: resetState,
    },
  );
  const isSearching = useContextSection(
    searchContext,
    state => state[0].isSearching,
  );

  return (
    <Card>
      <FilterFieldWrapper onSearch={onSearch} testId='inventory_log_filter'>
        <FilterField
          label='物料编号'
          name='wllbCodes'
          value={fields.wllbCodes}
          onChange={onChange('wllbCodes')}
        />
        <FilterField
          label='物料名称'
          name='name'
          value={fields.name}
          onChange={onChange('name')}
        />
        <FilterField
          label='库位编号'
          name='storageLocationCodes'
          value={fields.storageLocationCodes}
          onChange={onChange('storageLocationCodes')}
        />
        <FilterField
          label='库位名称'
          name='storageLocationName'
          value={fields.storageLocationName}
          onChange={onChange('storageLocationName')}
        />
        <FilterButtonGroup
          onSearch={onSearch}
          isSearching={isSearching}
          onReset={onReset}
        />
      </FilterFieldWrapper>
    </Card>
  );
};

export default Filter;
