import { useFormContext } from 'react-hook-form';
import { type TFunction, Trans } from 'react-i18next';

import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

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

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

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

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

export const DisableLibraryModal = ({
  library,
  onClose,
}: DisableLibraryModalProps) => {
  const { getValues } = useFormContext();
  const { t } = useLokaliseTranslation('libraries');
  const theme = useTheme();

  const updateStatusMutation = useUpdateLibraryStatus(library);

  const hasChildren = (library.children?.length ?? 0) > 0;

  const handleConfirm = () =>
    updateStatusMutation.mutate({
      state: LibraryStatus.DISABLED,
      notify: false,
      notificationType: getValues('notificationType'),
    });

  return (
    <HuDialog
      onClose={onClose}
      title={t('article.deactivate.confirm.title')}
      body={
        <Typography
          variant="globalS"
          color={theme.palette.textColors?.neutralText}
        >
          <Trans
            i18nKey={
              hasChildren
                ? t('article.deactivate.confirm.description_with_children')
                : t('article.deactivate.confirm.description')
            }
            t={t as TFunction}
            components={{ br: <br /> }}
          />
        </Typography>
      }
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onClose,
      }}
      primaryButtonProps={{
        loading: updateStatusMutation.isLoading,
        children: t('general:deactivate'),
        onClick: handleConfirm,
      }}
    />
  );
};

export default DisableLibraryModal;