import { type MouseEvent } from 'react';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import { CategoryStatus } from '../../constants';
import { type CategoryItem } from '../../types';
import useUpdateCategoryStatus from '../useUpdateCategoryStatus';

type ActivateCategoryModalProps = {
  onClose: () => void;
  category: CategoryItem;
};

const ActivateCategoryModal = ({
  onClose,
  category,
}: ActivateCategoryModalProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { mutate: updateCategoryStatus, isLoading } = useUpdateCategoryStatus();

  const handleActivate = () => {
    updateCategoryStatus(
      { categoryId: category.id, status: CategoryStatus.ACTIVE },
      { onSettled: onClose },
    );
  };

  const handleAction =
    (callback: Function) => (event: MouseEvent<HTMLButtonElement>) => {
      event.stopPropagation();
      callback();
    };

  return (
    <Dialog
      onClose={onClose}
      title={t('categories.activate.title')}
      textBody={t('categories.activate.description')}
      primaryButtonProps={{
        children: t('general:understood'),
        loading: isLoading,
        disabled: isLoading,
        onClick: handleAction(handleActivate),
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: isLoading,
        onClick: handleAction(onClose),
      }}
    />
  );
};

export default ActivateCategoryModal;
