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

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

  return (
    <Card>
      <FilterFieldWrapper onSearch={onSearch} testId='error_log_filter'>
        <FilterField
          label='请求地址'
          value={fields.url}
          onChange={onChange('url')}
          name='url'
        />
        <FilterField
          label='错误信息'
          value={fields.errorInfo}
          onChange={onChange('errorInfo')}
          name='errorInfo'
        />
        <FilterField
          label='请求内容'
          value={fields.dataVal}
          onChange={onChange('dataVal')}
          name='dataVal'
        />
        <FilterField
          value={fields.type}
          onChange={onChange('type')}
          label='请求类型'
          name='type'
        />
        <FilterDatePicker
          value={dates}
          onChange={onDatesChange}
          label='请求时间'
          name='date'
          enableTime
        />

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

export default Filter;
