import { FC } from 'react';

import { useMutation, useQueryClient } from 'react-query';
import { useNavigate } from 'react-router-dom';

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 { logEvent } from 'src/config/logging';
import { useMoreMenu } from 'src/contexts/MoreMenuContext';
import useGeneralError from 'src/hooks/useGeneralError';
import {
  dropMarketplaceListData,
  marketplaceKeys,
} from 'src/pages/dashboard/marketplace/queries';
import { marketplaceRoutes } from 'src/pages/dashboard/marketplace/routes';
import { deleteMarketplacePost } from 'src/services/marketplace';
import { EventName } from 'src/types/amplitude';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type MarketplacePostDeleteProps = {
  id: number;
  isDetail?: boolean;
};

export const MarketplacePostDelete: FC<MarketplacePostDeleteProps> = ({
  id,
  isDetail = false,
}) => {
  const { closeMenu } = useMoreMenu();
  const { t } = useTranslation(['marketplace', 'general', 'post']);
  const { enqueueSnackbar } = useHuSnackbar();
  const queryClient = useQueryClient();
  const showGeneralError = useGeneralError();
  const navigate = useNavigate();

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

  const deleteMutation = useMutation(() => deleteMarketplacePost(id), {
    onSuccess: () => {
      logEvent(EventName.POST_MARKETPLACE_DELETE, { postId: id });

      closeConfirm();

      dropMarketplaceListData(id);
      queryClient.invalidateQueries(marketplaceKeys.mine());
      queryClient.invalidateQueries(marketplaceKeys.mineCount());

      enqueueSnackbar({
        title: t('marketplace:post_deleted'),
        variant: 'success',
      });

      if (isDetail) {
        navigate(marketplaceRoutes.marketplace());
      }
    },
    onError: err => {
      showGeneralError(err, t('post:error_delete_post'));
    },
  });

  const handleDelete = () => deleteMutation.mutate();

  const {
    modal: confirmModal,
    showModal: showConfirmModal,
    closeModal: closeConfirmModal,
  } = useModal(
    HuDialog,
    {
      fullWidth: true,
      maxWidth: 'sm',
      sx: { zIndex: 2000 },
    },
    {
      onClose: closeMenu,
      title: t('general:confirmation') ?? '',
      textBody: t('post:confirm_delete_post') ?? '',
      primaryButtonProps: {
        children: t('general:accept'),
        onClick: handleDelete,
        loading: deleteMutation.isLoading,
      },
      secondaryButtonProps: {
        children: t('general:cancel'),
        onClick: closeConfirm,
      },
    },
  );

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

export default MarketplacePostDelete;
