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

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

import Accordion from '@material-hu/components/design-system/Accordion';
import Button from '@material-hu/components/design-system/Buttons/Button';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import useGeneralError from 'src/hooks/useGeneralError';
import useRequiredParams from 'src/hooks/useRequiredParams';
import { archiveGroup } from 'src/services/groups';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

import { useGroupMember } from '../GroupMemberContext';
import { invalidateGroup } from '../queries';

import ArchiveGroupModal from './ArchiveGroupModal';

type ArchivedGroupAlertProps = {
  isArchived: boolean;
  archivedDate: string | undefined;
};

const ArchivedGroupAlert: FC<ArchivedGroupAlertProps> = ({
  isArchived,
  archivedDate,
}) => {
  const { t } = useTranslation(['group']);
  const { isGroupAdmin } = useGroupMember();
  const { id } = useRequiredParams(['id']);
  const { enqueueSnackbar } = useHuSnackbar();
  const showGeneralError = useGeneralError();
  const {
    modal: unarchiveModal,
    showModal: showUnarchiveModal,
    closeModal: closeUnarchiveModal,
  } = useModal(
    () => (
      <ArchiveGroupModal
        onClose={closeUnarchiveModal}
        onConfirm={unarchiveGroupMutation}
        isLoading={isUnarchiving}
        isArchived
      />
    ),
    { maxWidth: 'sm', fullWidth: true },
  );

  const { mutate: unarchiveGroupMutation, isLoading: isUnarchiving } =
    useMutation(() => archiveGroup(id, false), {
      onSuccess: () => {
        invalidateGroup(id);
        closeUnarchiveModal();
        enqueueSnackbar({
          title: t('group_unarchived_success'),
          variant: 'success',
        });
      },
      onError: err => {
        showGeneralError(err, t('error_archive_group'));
      },
    });

  if (!isArchived || !archivedDate) return null;

  return (
    <>
      <Accordion
        elevation={0}
        sx={{
          border: _theme =>
            `1px solid ${_theme.palette.new.border.neutral.default}`,
          borderRadius: _theme => _theme.shape.borderRadiusL,
        }}
        title={t('group_archived_alert')}
        avatar={{ Icon: IconArchive, color: 'default' }}
        customDetail={
          <Stack sx={{ gap: 2 }}>
            <Typography variant="globalS">
              {t('group_archived_alert_description', {
                date: new Date(archivedDate).toLocaleDateString(),
              })}
            </Typography>
            {isGroupAdmin ? (
              <Button
                variant="contained"
                color="primary"
                onClick={() => showUnarchiveModal()}
                disabled={isUnarchiving}
              >
                {t('unarchive_group')}
              </Button>
            ) : null}
          </Stack>
        }
      />
      {unarchiveModal}
    </>
  );
};

export default ArchivedGroupAlert;