import { useModal } from '@material-hu/hooks/useModal';
import { IconTrash } from '@material-hu/icons/tabler';
import HuDialog from '@material-hu/components/design-system/Dialog';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import MenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import { type FC } from 'react';
import { useMutation } from 'react-query';

import { useMoreMenu } from 'src/contexts/MoreMenuContext';
import useGeneralError from 'src/hooks/useGeneralError';
import { logEvent } from 'src/config/logging';
import { deleteGroupPostRequest } from 'src/services/groups';
import { deleteFeedPostRequest } from 'src/services/posts';
import { type EventName } from 'src/types/amplitude';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';
import { getDeleteModalTexts } from 'src/utils/feed';

type Props = {
  requestId: number;
  postId: number;
  onDelete: () => void;
  amplitudeEventName: EventName;
  groupId?: number;
};

const PendingApprovalPostDelete: FC<Props> = ({
  requestId,
  postId,
  onDelete,
  amplitudeEventName,
  groupId,
}) => {
  const { closeMenu } = useMoreMenu();
  const { t } = useTranslation(['web_only']);
  const { enqueueSnackbar } = useHuSnackbar();
  const showGeneralError = useGeneralError();

  const closeConfirm = () => {
    closeConfirmModal();
    closeMenu();
  };

  const deleteMutation = useMutation(
    () =>
      groupId !== undefined
        ? deleteGroupPostRequest(String(groupId), requestId)
        : deleteFeedPostRequest(requestId),
    {
      onSuccess: () => {
        logEvent(amplitudeEventName, {
          postId,
          isScheduled: false,
          isPendingApproval: true,
          groupId,
        });
        onDelete();
        enqueueSnackbar({
          title: t('post:delete_post_success'),
          variant: 'success',
        });
        closeConfirm();
      },
      onError: err => {
        showGeneralError(err, t('post:error_delete_post'));
      },
    },
  );

  const {
    modal: confirmModal,
    showModal: showConfirmModal,
    closeModal: closeConfirmModal,
  } = useModal(
    HuDialog,
    {
      fullWidth: true,
      maxWidth: 'sm',
      sx: { zIndex: theme => theme.zIndex.modal },
    },
    {
      onClose: closeMenu,
      ...getDeleteModalTexts({ isComment: false, isLive: false, t }),
      primaryButtonProps: {
        children: t('general:accept'),
        onClick: () => deleteMutation.mutate(),
        loading: deleteMutation.isLoading,
      },
      secondaryButtonProps: {
        children: t('general:cancel'),
        onClick: closeConfirm,
      },
    },
  );

  return (
    <>
      <MenuItem
        onClick={() => showConfirmModal()}
        sx={{ p: 0 }}
      >
        <ListItem
          sx={{ p: 0 }}
          avatar={{ Icon: IconTrash }}
          text={{ title: t('general:delete') }}
        />
      </MenuItem>
      {confirmModal}
    </>
  );
};

export default PendingApprovalPostDelete;