import HuFiltersButton from '@material-hu/components/composed-components/Filters/FiltersButton';

import useCourseFilterDrawer from '../../hooks/useCourseFilterDrawer';
import { type TParams as GetCoursesParams } from '../../hooks/useGetCourses';
import { type CourseFilters } from '../../types';
import { getCourseFiltersCount } from '../../utils';

export type CourseFilterProps = {
  onChange: (filters: CourseFilters) => void;
  params: GetCoursesParams;
};

const CourseFilter = ({ onChange, params }: CourseFilterProps) => {
  const filtersCount = getCourseFiltersCount(params);

  const { courseFilterDrawer, showCourseFilterDrawer } =
    useCourseFilterDrawer(params);

  const handleClick = () =>
    showCourseFilterDrawer({
      onSave: onChange,
      onClear: onChange,
    });

  return (
    <>
      {courseFilterDrawer}
      <HuFiltersButton
        onClick={handleClick}
        count={filtersCount}
      />
    </>
  );
};

export default CourseFilter;
