import {FilterSelectorModal, FilterTool} from '@components';
import {FC} from 'react';
import {
  useFilterDB,
  useFilterField,
  useTableSearchState,
  useTableSearchToolEvents,
} from '@hooks';
import {context, searchContext} from '../context';
import {sourceMap, fixedMap} from './state';

const Filter: FC = function () {
  const [fields, {onChange, resetState}] = useFilterField(
    {
      userName: '',
      code: '',
      realName: '',
      department: '',
      role: '',
      email: '',
      landline: '',
      phone: '',
      modifyUser: '',
    },
    true,
  );
  const [visible, {onSearch, onShowModal, onCloseModal, onReset}] =
    useTableSearchToolEvents(context, fields, {
      resetCallback: resetState,
    });
  const [filterList, {set}] = useFilterDB();
  const [isSearching] = useTableSearchState(searchContext);

  return (
    <>
      <FilterTool
        testId='user_filter'
        filterData={filterList}
        fixedMap={fixedMap}
        sourceMap={sourceMap}
        fields={fields}
        onFilter={onShowModal}
        onReset={onReset}
        onSearch={onSearch}
        onChange={onChange}
        isSearching={isSearching}
      />

      <FilterSelectorModal
        visible={visible}
        onClose={onCloseModal}
        filtermap={sourceMap}
        onConfirm={set}
        source={filterList}
      />
    </>
  );
};

export default Filter;
