import { FC } from 'react';

import { useMutation } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
import { IconCheck, IconX } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { ORGANIZER_LIMIT } from 'src/constants/events';
import {
  acceptOrganizerInvitation,
  rejectOrganizerInvitation,
} from 'src/services/events';
import { Event } from 'src/types/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  invalidateEventOrganizerBanner,
  invalidateEventOrganizers,
} from '../queries';

type OrganizerInvitationBannerProps = {
  event: Event;
};

export const OrganizerInvitationBanner: FC<
  OrganizerInvitationBannerProps
> = props => {
  const { event } = props;
  const { t } = useLokaliseTranslation('events');

  const acceptMutation = useMutation(
    () => acceptOrganizerInvitation(event.id),
    {
      onSuccess: () => {
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.CARD_DISPLAY);
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.DRAWER_DISPLAY);
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.OWN_USER);
        invalidateEventOrganizerBanner(event.id);
      },
    },
  );

  const rejectMutation = useMutation(
    () => rejectOrganizerInvitation(event.id),
    {
      onSuccess: () => {
        closeRejectModal();
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.CARD_DISPLAY);
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.DRAWER_DISPLAY);
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.OWN_USER);
        invalidateEventOrganizerBanner(event.id);
      },
    },
  );

  const {
    modal: rejectModal,
    showModal: showRejectModal,
    closeModal: closeRejectModal,
  } = useModal(
    () => (
      <HuDialog
        onClose={closeRejectModal}
        title={t('reject_organizer_title')}
        textBody={t('reject_organizer_description')}
        primaryButtonProps={{
          children: t('reject'),
          onClick: () => rejectMutation.mutate(),
          loading: rejectMutation.isLoading,
        }}
        secondaryButtonProps={{
          children: t('cancel'),
          onClick: () => closeRejectModal(),
        }}
      />
    ),
    {
      onClose: () => closeRejectModal(),
      fullWidth: true,
    },
  );

  return (
    <>
      {rejectModal}
      <Stack
        sx={{
          position: 'relative',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: theme =>
            theme.palette.new?.background?.feedback?.highlight,
          border: theme =>
            `1px solid ${theme.palette.new?.border?.states?.secondary}`,
          borderRadius: theme => theme.shape.borderRadiusS,
          borderLeftStyle: 'none',
          padding: 2,
          gap: 1,
          '::before': {
            content: '""',
            position: 'absolute',
            left: 0,
            top: '-1px',
            bottom: '-1px',
            borderLeft: theme =>
              `solid ${theme.palette.newBase?.purple[500]} 4px`,
            borderRadius: '6px',
            width: '20px',
          },
        }}
      >
        <Stack>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            color="new.text.feedback.highlight"
          >
            {t('organizer_invitation_title')}
          </Typography>
          <Typography
            variant="globalXS"
            color="new.text.feedback.highlight"
          >
            {t('organizer_invitation_description')}
          </Typography>
        </Stack>
        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
          <Button
            variant="primary"
            size="small"
            startIcon={<IconCheck />}
            onClick={() => acceptMutation.mutate()}
          >
            {t('accept')}
          </Button>
          <Button
            variant="tertiary"
            size="small"
            startIcon={<IconX />}
            onClick={showRejectModal}
          >
            {t('reject')}
          </Button>
        </Stack>
      </Stack>
    </>
  );
};

export default OrganizerInvitationBanner;