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

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

  return (
    <Card>
      <FilterFieldWrapper onSearch={onSearch} testId='container_filter'>
        <FilterField
          name='containerCode'
          label='容器编号'
          value={fields.code}
          onChange={onChange('code')}
        />
        <FilterField
          name='containerName'
          label='容器名称'
          value={fields.containerName}
          onChange={onChange('containerName')}
        />
        <FilterField
          name='containerType'
          label='容器类型'
          value={fields.type}
          onChange={onChange('type')}
        />
        <FilterKeySelect
          selectKey='部门字典'
          value={fields.department}
          label='所属部门'
          name='department'
          onChange={onChange('department')}
        />
        <FilterField
          name='modifyUser'
          label='修改人'
          value={fields.modifyUser}
          onChange={onChange('modifyUser')}
        />
        <FilterButtonGroup
          onSearch={onSearch}
          isSearching={isSearching}
          onReset={onReset}
        />
      </FilterFieldWrapper>
    </Card>
  );
};

export default Filter;
