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

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

  return (
    <Card>
      <FilterFieldWrapper onSearch={onSearch} testId='child_menu_filter'>
        <FilterField
          name='childMenuName'
          label='菜单名称'
          value={field.name}
          onChange={onChange('name')}
        />
        <FilterField
          name='modifyUser'
          label='修改人'
          value={field.modifyUser}
          onChange={onChange('modifyUser')}
        />
        <FilterButtonGroup
          isSearching={isSearching}
          onSearch={onSearch}
          onReset={onReset}
        />
      </FilterFieldWrapper>
    </Card>
  );
};

export default Filter;
