import { FC } from 'react';
import { useMutation } from 'react-query';
import { useParams } from 'react-router';

import { useModal } from '@material-hu/hooks/useModal';
import { IconCalendarCheck, IconTrash } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuDialog from '@material-hu/components/design-system/Dialog';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import useFormatDate from 'src/hooks/useFormatDate';
import useGeneralError from 'src/hooks/useGeneralError';
import { deleteUserAssignment } from 'src/services/timeTrackingService';
import { WorkScheduleUserAssignment } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getUTCO } from 'src/utils/timeUtils';

import {
  invalidateScheduleAssignments,
  invalidateScheduleAssignmentsHistory,
} from '../../../queries';
import { DeleteAssignmentParams } from '../../types';

type AssignmentItemProps = {
  assignment: WorkScheduleUserAssignment;
  assignmentsHistory: WorkScheduleUserAssignment[];
  onCloseDrawer: () => void;
  userId: number;
};

const AssignmentItem: FC<AssignmentItemProps> = ({
  assignment,
  assignmentsHistory,
  onCloseDrawer,
  userId,
}) => {
  const { t } = useLokaliseTranslation('work_schedules');
  const scheduleId = parseInt(useParams().id || '');
  const { formatDate } = useFormatDate();
  const { enqueueSnackbar } = useHuSnackbar();
  const showGeneralError = useGeneralError();

  const deleteAssignmentMutation = useMutation(
    // Not using scheduleId from params because it may not the scheduleId of the assignment (in case the schedule timeslots were edited)
    ({
      scheduleId: assignmentSchedule,
      assignmentId,
    }: DeleteAssignmentParams) =>
      deleteUserAssignment(assignmentSchedule, assignmentId),
    {
      onSuccess: async (_, variables) => {
        // If === 1 we should close the drawer
        if (assignmentsHistory.length === 1) {
          onCloseDrawer();
        }
        const newestAssignmentDeleted =
          variables.assignmentId === assignmentsHistory[0].id;
        if (newestAssignmentDeleted) {
          await invalidateScheduleAssignments(variables.scheduleId);
        } else {
          await invalidateScheduleAssignmentsHistory(scheduleId, userId);
        }
        closeDeletionModal();
        enqueueSnackbar({
          title: t('SCHEDULE_ASSIGNMENTS.ASSIGNMENT_DELETE_SUCCESS'),
          description: t(
            'SCHEDULE_ASSIGNMENTS.ASSIGNMENT_DELETE_SUCCESS_DESCRIPTION',
          ),
          variant: 'success',
        });
      },
      onError: err => {
        showGeneralError(err, t('ASSIGNMENT_DELETE_ERROR'));
      },
    },
  );

  const {
    modal: confirmDeletionModal,
    closeModal: closeDeletionModal,
    showModal: showDeletionModal,
  } = useModal(
    HuDialog,
    { maxWidth: 'sm' },
    {
      title: t('SCHEDULE_ASSIGNMENTS.CONFIRM_ASSIGNMENT_DELETE'),
      textBody: t('SCHEDULE_ASSIGNMENTS.CONFIRM_ASSIGNMENT_DELETE_DESCRIPTION'),
      primaryButtonProps: {
        children: t('GENERAL:CONFIRM'),
        loading: deleteAssignmentMutation.isLoading,
        onClick: () => {
          deleteAssignmentMutation.mutate({
            scheduleId: assignment.workScheduleId,
            assignmentId: assignment.id,
          });
        },
      },
      secondaryButtonProps: {
        children: t('GENERAL:CANCEL'),
        onClick: () => {
          closeDeletionModal();
        },
      },
    },
  );

  const parseAssignmentPeriod = (startDate: string, endDate?: string) => {
    const start = t('SCHEDULE_ASSIGNMENTS.ASSIGNMENT_START_DATE', {
      date: formatDate(getUTCO(startDate)),
    });
    const end = t('SCHEDULE_ASSIGNMENTS.ASSIGNMENT_END_DATE', {
      date: endDate
        ? formatDate(getUTCO(endDate))
        : t('SCHEDULE_ASSIGNMENTS.NOT_SPECIFIED'),
    });
    return `${start} • ${end}`;
  };

  return (
    <>
      {confirmDeletionModal}
      <Stack
        key={assignment.id}
        sx={{
          alignItems: 'center',
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
          borderRadius: 2,
          flexDirection: 'row',
          gap: 1,
          p: 2,
          '&:hover .MuiIconButton-root': {
            opacity: 1,
          },
        }}
      >
        <HuAvatar Icon={IconCalendarCheck} />
        <Typography
          variant="globalXS"
          sx={{ flex: 1 }}
        >
          {parseAssignmentPeriod(assignment.startDate, assignment?.endDate)}
        </Typography>
        <IconButton
          aria-label={t('SCHEDULE_ASSIGNMENTS.DELETE_ASSIGNMENT')}
          variant="secondary"
          disabled={deleteAssignmentMutation.isLoading}
          onClick={() => {
            showDeletionModal();
          }}
          sx={{
            opacity: 0,
            transition: 'opacity 0.2s ease',
          }}
        >
          <IconTrash />
        </IconButton>
      </Stack>
    </>
  );
};

export default AssignmentItem;