import { useFormContext, useWatch } from 'react-hook-form';

import Drawer from '@material-hu/components/design-system/Drawer';

import { type KudosRankingFilterValues } from 'src/pages/dashboard/acknowledgements/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { hasSelectedFilters } from '../../../utils';

import { RankingFilterForm } from './RankingFilterForm';

type RankingFilterDrawerProps = {
  onSubmit: () => void;
  onClean: () => void;
  onClose: () => void;
};

export const RankingFilterDrawer = ({
  onSubmit,
  onClean,
  onClose,
}: RankingFilterDrawerProps) => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { control } = useFormContext<KudosRankingFilterValues>();

  const hasFilters = hasSelectedFilters(useWatch({ control }));

  return (
    <>
      <Drawer.Header
        title={t('filter')}
        onClose={onClose}
      />
      <Drawer.Body>
        <RankingFilterForm />
      </Drawer.Body>
      <Drawer.Actions
        primaryButtonProps={{
          fullWidth: true,
          children: t('filter'),
          onClick: onSubmit,
          disabled: !hasFilters,
        }}
        secondaryButtonProps={{
          fullWidth: true,
          children: t('clean_filters'),
          onClick: onClean,
        }}
      />
    </>
  );
};
