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

import Button from '@material-hu/components/design-system/Buttons/Button';
import InputClassic from '@material-hu/components/design-system/Inputs/Classic';
import Menu from '@material-hu/components/design-system/Menu';

import {
  type ApprovableStatus,
  TimeTrackingCategorizedHourStatus,
} from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  anchorEl: HTMLElement | null;
  status: ApprovableStatus | null | undefined;
  note: string;
  isConfirming: boolean;
  onNoteChange: (value: string) => void;
  onCancel: () => void;
  onConfirm: () => void;
  onClose: (event: unknown, reason: 'backdropClick' | 'escapeKeyDown') => void;
};

const ApprovalReasonMenu = ({
  anchorEl,
  status,
  note,
  isConfirming,
  onNoteChange,
  onCancel,
  onConfirm,
  onClose,
}: Props) => {
  const { t } = useLokaliseTranslation(['time_tracker', 'approval_requests']);

  const confirmLabel =
    status === TimeTrackingCategorizedHourStatus.APPROVED
      ? t('approval_requests:approve')
      : t('approval_requests:reject');

  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={onClose}
      position="right"
      sx={{
        '& .MuiPaper-root': {
          minWidth: '393px',
        },
        '& .MuiList-root': {
          maxWidth: 'none',
        },
      }}
    >
      <Stack
        sx={{ gap: 2, p: 2 }}
        onClick={e => e.stopPropagation()}
        onMouseDown={e => e.stopPropagation()}
        // Stop key propagation so MUI Menu's list-navigation (which
        // focuses MenuItems by first letter) doesn't swallow keystrokes
        // typed into the reason input (example: pressing 'm' was not being input correctly).
        onKeyDown={e => e.stopPropagation()}
      >
        <Stack sx={{ gap: 1 }}>
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('approval_requests:response_reason_optional')}
          </Typography>
          <InputClassic
            multiline
            maxLength={300}
            value={note}
            onChange={onNoteChange}
            placeholder={t('approvals.write_comments_placeholder')}
            fullWidth
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.elements.default,
            }}
          />
        </Stack>
      </Stack>
      <Divider />
      <Stack
        sx={{ flexDirection: 'row', gap: 1, p: 2 }}
        onClick={e => {
          e.stopPropagation();
        }}
        onMouseDown={e => {
          e.stopPropagation();
        }}
      >
        <Button
          variant="tertiary"
          onClick={onCancel}
          size="small"
          fullWidth
        >
          {t('general:cancel')}
        </Button>
        <Button
          size="small"
          variant="primary"
          onClick={onConfirm}
          loading={isConfirming}
          fullWidth
        >
          {confirmLabel}
        </Button>
      </Stack>
    </Menu>
  );
};

export default ApprovalReasonMenu;