import { FC } from 'react';

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

import { useModal } from '@material-hu/hooks/useModal';
import { IconSquareRounded } from '@material-hu/icons/tabler';

import HuDialog from '@material-hu/components/design-system/Dialog';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import { MenuItemProps } from '@material-hu/components/design-system/Menu/components/MenuItem/types';

import { useMoreMenu } from 'src/contexts/MoreMenuContext';
import useGeneralError from 'src/hooks/useGeneralError';
import { feedKeys } from 'src/pages/dashboard/feed/queries';
import { groupsKeys } from 'src/pages/dashboard/groups/queries';
import { updateGroupPollDeadline as updateGroupPollDeadlineService } from 'src/services/groups';
import { updatePollDeadline } from 'src/services/posts';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

type PollEndNowMenuItemProps = Omit<MenuItemProps, 'id'> & {
  postId: number;
  pollId: number;
  isGroupPoll?: boolean;
  groupId?: string;
};

const PollEndNowMenuItem: FC<PollEndNowMenuItemProps> = ({
  postId,
  pollId,
  isGroupPoll = false,
  groupId,
  ...menuProps
}) => {
  const { t } = useTranslation('post');
  const showGeneralError = useGeneralError();
  const queryClient = useQueryClient();
  const { closeMenu } = useMoreMenu();

  const updateDeadlineMutation = useMutation(
    () => {
      const newDeadline = null;
      if (isGroupPoll && groupId) {
        return updateGroupPollDeadlineService(
          Number(groupId),
          postId,
          pollId,
          newDeadline,
        );
      }
      return updatePollDeadline(postId, pollId, newDeadline);
    },
    {
      onSuccess: () => {
        if (isGroupPoll && groupId) {
          queryClient.invalidateQueries(groupsKeys.postList(groupId));
        } else {
          queryClient.invalidateQueries(feedKeys.list());
          queryClient.invalidateQueries(feedKeys.detail(postId));
        }
        closeModal();
        closeMenu?.();
      },
      onError: err => showGeneralError(err, t('poll_deadline_update_error')),
    },
  );

  const handleConfirm = () => {
    updateDeadlineMutation.mutate();
  };

  const {
    modal: confirmModal,
    showModal,
    closeModal,
  } = useModal(
    () => (
      <HuDialog
        title={t('poll_end_now_title')}
        textBody={t('poll_end_now_confirmation')}
        primaryButtonProps={{
          children: t('poll_end_now'),
          onClick: handleConfirm,
          disabled: updateDeadlineMutation.isLoading,
          color: 'error',
        }}
        secondaryButtonProps={{
          children: t('cancel'),
          onClick: closeModal,
        }}
        onClose={closeModal}
      />
    ),
    {
      sx: { zIndex: 2000 },
    },
  );

  return (
    <>
      <HuMenuItem
        {...menuProps}
        onClick={showModal}
        sx={{ p: 0 }}
      >
        <HuListItem
          sx={{ p: 0 }}
          avatar={{ Icon: IconSquareRounded }}
          text={{ title: t('poll_end_now') }}
        />
      </HuMenuItem>
      {confirmModal}
    </>
  );
};

export default PollEndNowMenuItem;