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

const interfaceOptions = [
  {label: '质检信息', value: '质检信息'},
  {label: '字典信息', value: '字典信息'},
  {label: '采购信息', value: '采购信息'},
  {label: '生产领料信息', value: '生产领料信息'},
  {label: '非生产领料信息', value: '非生产领料信息'},
  {label: '报工单', value: '报工单'},
  {label: '交货单', value: '交货单'},
  {label: '移库单', value: '移库单'},
  {label: '入库回传', value: '入库回传'},
  {label: '出库回传', value: '出库回传'},
];

const interfaceTypeOptions = [
  {label: '接入', value: '0'},
  {label: '接出', value: '1'},
];

const Filter: FC = function () {
  const [fields, {onChange, resetState}] = useFilterField(
    {
      type: '' as GSInterfaceType,
      accessType: '' as '' | '1' | '0',
      data: '',
    },
    true,
  );
  const {isSearching} = useContextSection(searchContext, state => state[0]);
  const [{dates, start, end}, onDatesChange] = useRangeDate();
  const [, {onSearch, onReset}] = useTableSearchToolEvents(
    context,
    {...fields, startTime: start, endTime: end},
    {
      resetCallback() {
        resetState();
        onDatesChange([null, null]);
      },
    },
  );

  return (
    <Card>
      <FilterFieldWrapper onSearch={onSearch} testId='gs_interface_log_filter'>
        <FilterSelect
          label='接口名称'
          options={interfaceOptions}
          value={fields.type}
          name='type'
          onChange={onChange('type')}
        />
        <FilterSelect
          label='接口类型'
          options={interfaceTypeOptions}
          value={fields.accessType}
          name='accessType'
          onChange={onChange('accessType')}
        />
        <FilterField
          label='接口内容'
          value={fields.data}
          name='data'
          onChange={onChange('data')}
        />
        <FilterDatePicker
          label='接口时间'
          value={dates}
          onChange={onDatesChange}
          name='dates'
        />

        <FilterButtonGroup
          onSearch={onSearch}
          isSearching={isSearching}
          onReset={onReset}
        />
      </FilterFieldWrapper>
    </Card>
  );
};

export default Filter;
