import { useState } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import InputClassic from '@material-hu/components/design-system/Inputs/Classic';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';
import { Drawer, useDrawerLayer } from '@material-hu/components/layers/Drawers';

import { useOverrideCategorizedHourStatus } from 'src/hooks/queryHooks/timeTracking';
import { TimeTrackingCategorizedHourStatus } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  categorizedHourId: string;
  onSuccess?: () => void;
};

const RevokeRequestDrawer = ({ categorizedHourId, onSuccess }: Props) => {
  const { t } = useLokaliseTranslation(['approval_requests', 'time_tracker']);
  const { closeDrawer } = useDrawerLayer();
  const { enqueueSnackbar } = useHuSnackbar();
  const [comment, setComment] = useState('');
  const revokeMutation = useOverrideCategorizedHourStatus();

  const handleClose = () => closeDrawer();

  const handleConfirm = () => {
    revokeMutation.mutate(
      {
        id: categorizedHourId,
        status: TimeTrackingCategorizedHourStatus.REJECTED,
        comment: comment.trim() || undefined,
      },
      {
        onSuccess: () => {
          closeDrawer();
          enqueueSnackbar({
            title: t('approval_requests:revoke_success'),
            variant: 'success',
          });
          onSuccess?.();
        },
      },
    );
  };

  return (
    <>
      <Drawer.Header
        title={t('approval_requests:revoke_request')}
        hasBackButton
        onClose={handleClose}
      />
      <Drawer.Body>
        <Stack sx={{ gap: 1 }}>
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('approval_requests:revoke_reason')}
          </Typography>
          <InputClassic
            minRows={4}
            maxRows={4}
            value={comment}
            placeholder={t('approval_requests:revoke_reason_placeholder')}
            onChange={setComment}
            fullWidth
            multiline
          />
        </Stack>
      </Drawer.Body>
      <Drawer.Actions
        primaryButtonProps={{
          children: t('approval_requests:confirm_revoke'),
          fullWidth: true,
          loading: revokeMutation.isLoading,
          onClick: handleConfirm,
        }}
        secondaryButtonProps={{
          children: t('time_tracker:exit_without_saving'),
          fullWidth: true,
          onClick: handleClose,
          disabled: revokeMutation.isLoading,
        }}
      />
    </>
  );
};

export default RevokeRequestDrawer;