import { ComponentProps, FC } from 'react';
import { useMutation } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
import { IconTrash } 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 { ORGANIZER_LIMIT } from 'src/constants/events';
import { useAuth } from 'src/contexts/JWTContext';
import { deleteEventOrganizer } from 'src/services/events';
import { Event, EventOrganizer, EventOrganizerStatus } from 'src/types/events';
import { User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName, getInitials } from 'src/utils/userUtils';

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

type OrganizerListItemProps = {
  organizer: User | EventOrganizer;
  event: Event;
  creatorId?: number;
  slotProps?: ComponentProps<typeof HuListItem>['slotProps'];
};

export const OrganizerListItem: FC<OrganizerListItemProps> = props => {
  const { organizer, event, creatorId, slotProps } = props;
  const { t } = useLokaliseTranslation('events');
  const { user } = useAuth();

  const fullName = getFullName(organizer);
  const initials = getInitials(fullName);

  const isPending =
    'status' in organizer && organizer.status === EventOrganizerStatus.PENDING;

  const isEventOrganizer = 'userId' in organizer;
  const canRemove = isEventOrganizer && user?.id === creatorId;

  const deleteOrganizerMutation = useMutation(
    () => deleteEventOrganizer(event.id, organizer.id),
    {
      onSuccess: () => {
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.CARD_DISPLAY);
        invalidateEventOrganizers(event.id, ORGANIZER_LIMIT.DRAWER_DISPLAY);
        closeDeleteModal();
      },
    },
  );

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal(
    () => (
      <HuDialog
        onClose={closeDeleteModal}
        title={t('remove_organizer_title', { name: fullName })}
        textBody={t('remove_organizer_description')}
        primaryButtonProps={{
          children: t('eliminate'),
          onClick: () => {
            deleteOrganizerMutation.mutate();
          },
          loading: deleteOrganizerMutation.isLoading,
        }}
        secondaryButtonProps={{
          children: t('cancel'),
          onClick: closeDeleteModal,
        }}
      />
    ),
    {
      onClose: () => closeDeleteModal(),
      fullWidth: true,
    },
  );

  return (
    <>
      {deleteModal}
      <HuListItem
        avatar={{
          src: organizer.profilePicture ?? '',
          text: initials,
          color: 'primary',
        }}
        text={{ title: fullName }}
        {...(isPending && {
          sidePill: { label: t('pending'), type: 'warning', size: 'small' },
        })}
        {...(canRemove && {
          action: {
            Icon: IconTrash,
            onClick: showDeleteModal,
          },
        })}
        slotProps={slotProps}
      />
    </>
  );
};
