import { type MouseEvent } from 'react';
import { type TFunction, Trans } from 'react-i18next';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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 { hasChildren } from '../../utils';
import useUpdateCategoryStatus from '../useUpdateCategoryStatus';

type DeactivateCategoryModalProps = {
  onClose: () => void;
  onDeactivate?: () => void;
  category: CategoryItem;
};

const DeactivateCategoryModal = ({
  onClose,
  onDeactivate,
  category,
}: DeactivateCategoryModalProps) => {
  const { t } = useLokaliseTranslation('learning');

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

  const handleDeactivate = () =>
    onDeactivate
      ? onDeactivate()
      : updateCategoryStatus(
          { categoryId: category.id, status: CategoryStatus.INACTIVE },
          { onSettled: onClose },
        );

  const getProps = () => {
    if (hasChildren(category))
      return {
        title: t('categories.deactivate.confirm.title', {
          name: `"${category.name}"`,
        }),
        description: (
          <Stack sx={{ gap: 1 }}>
            <Typography>
              {t('categories.deactivate.with_children.description')}
            </Typography>
            <Typography component="div">
              <Trans
                i18nKey={t('categories.children.includes', {
                  name: category.name,
                })}
                components={{
                  strong: (
                    <Typography
                      fontWeight="fontWeightSemiBold"
                      component="span"
                    />
                  ),
                }}
                as="span"
                t={t as TFunction}
              />
              <Stack
                component="ul"
                sx={{ mt: 1, ml: 2, gap: 1 }}
              >
                {category.children?.map(child => (
                  <li key={child.id}>
                    <Typography
                      fontWeight="fontWeightSemiBold"
                      component="span"
                    >
                      {child.name}
                    </Typography>
                    {hasChildren(child) && (
                      <>
                        <Typography
                          fontWeight="fontWeightSemiBold"
                          component="span"
                        >
                          {' > '}
                        </Typography>
                        <Typography component="span">
                          {child.children
                            ?.map(grandchild => grandchild.name)
                            .join(' / ')}
                        </Typography>
                      </>
                    )}
                  </li>
                ))}
              </Stack>
            </Typography>
          </Stack>
        ),
      };

    return {
      title: t('categories.deactivate.confirm.title', { name: category.name }),
      description: t('categories.deactivate.confirm.description'),
    };
  };

  const { title, description } = getProps();

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

  return (
    <Dialog
      onClose={onClose}
      title={title}
      body={<Typography component="div">{description}</Typography>}
      primaryButtonProps={{
        children: t('general:deactivate'),
        loading: isLoading,
        disabled: isLoading,
        onClick: handleAction(handleDeactivate),
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: isLoading,
        onClick: handleAction(onClose),
      }}
    />
  );
};

export default DeactivateCategoryModal;
