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

import { IconBellRinging } from '@material-hu/icons/tabler';

import { KnowledgeLibraryArticle, LibraryStatus } from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';

import BasicModal from 'src/components/BasicModal';

import useUpdateLibraryStatus from '../hooks/useUpdateLibraryStatus';

import NotificationOptions from './NotificationOptions';

export type NotifyLibraryModalProps = {
  library: KnowledgeLibraryArticle;
  onClose: () => void;
};

export const NotifyLibraryModal = ({
  library,
  onClose,
}: NotifyLibraryModalProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const { getValues } = useFormContext();

  const notifyMutation = useUpdateLibraryStatus(library);

  const handleNotify = (notify: boolean) => () =>
    notifyMutation.mutate(
      {
        state: LibraryStatus.ENABLED,
        notify,
        notificationType: getValues('notificationType'),
      },
      { onSettled: onClose },
    );

  return (
    <BasicModal
      avatarColor="primary"
      buttonColor="primary"
      Icon={<IconBellRinging />}
      title={t('general:notification.notify.audience.title')}
      body={
        <>
          {t('article.notify.description')}
          <NotificationOptions sx={{ mt: 1 }} />
        </>
      }
      primaryButtonProps={{
        loading: notifyMutation.isLoading,
        disabled: notifyMutation.isLoading,
        children: t('general:notification.send'),
        onClick: handleNotify(true),
      }}
      secondaryButtonProps={{
        loading: notifyMutation.isLoading,
        disabled: notifyMutation.isLoading,
        children: t('general:notification.no_send'),
        onClick: handleNotify(false),
      }}
    />
  );
};

export default NotifyLibraryModal;