import { DocumentPlusIcon } from '@heroicons/react/24/solid';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import Button from '../../../components/Button';
import { useGetDropdownQuery } from '../../../features/dropdown/dropdownApi';
import { resetFilterState } from '../../../features/filters/filtersSlice';
import FiltersTable from './components/FiltersTable';

const FiltersManager = () => {
  // Caching Filters Dropdown
  // eslint-disable-next-line no-empty-pattern
  const {} = useGetDropdownQuery('filters');

  const dispatch = useDispatch();

  const navigate = useNavigate();
  const handleNewFilter = () => {
    dispatch(resetFilterState());
    navigate('editor');
  };
  return (
    <div>
      <div className='wmx-flex wmx-mb-5'>
        <Button onClick={handleNewFilter}>
          <DocumentPlusIcon className='wmx-text-white wmx-size-4' /> New Filter
        </Button>
      </div>
      <FiltersTable />
    </div>
  );
};
export default FiltersManager;
