/**
 * @file DeleteDocumentModal.tsx - Confirmation modal displayed before a document is permanently deleted.
 * Supports Enter key shortcut to confirm deletion, shows a processing spinner during the delete API call, and suspends itself when a reauthentication modal interrupts.
 */

import { type FC, useEffect } from 'react';
import { Key } from 'ts-key-enum';
import { Button, Modal, Spinner } from 'react-bootstrap';
import { useReauthModalSuspension } from '../../../../../hooks/modals/useReauthModalSuspension.ts';
import { Trans, useTranslation } from 'react-i18next';

/**
 * Props for the DeleteDocumentModal component.
 */
interface DeleteDocumentModalProps {
  /** Whether the modal is currently visible */
  show: boolean;

  /** Callback to close the modal without deleting */
  onHide: () => void;

  /** Callback to execute the document deletion operation */
  onDelete: () => void;

  /** Whether the delete operation is currently in progress */
  processing: boolean;
}

/**
 * Delete Document modal that appears to require user confirm deletion operation.
 * Suspends visibility if a reauthentication modal appears during the operation.
 */
export const DeleteDocumentModal: FC<DeleteDocumentModalProps> = ({
  show,
  onHide,
  onDelete,
  processing,
}: {
  show: boolean;
  onHide: () => void;
  onDelete: () => void;
  processing: boolean;
}) => {
  // Track modal suspension state for reauthentication interruption handling
  const modalSuspensionState = useReauthModalSuspension(show);

  // Register Enter key listener when modal is visible and not suspended
  useEffect(() => {
    if (!show || modalSuspensionState === 'suspended') {
      return;
    }

    // Enter button triggers delete confirmation
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === Key.Enter) {
        event.preventDefault();
        onDelete();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [show, modalSuspensionState]);

  const { t } = useTranslation(undefined, {
    keyPrefix:
      'components.processing.details_folder_panel.sections.folder_section.components.delete_document_modal',
  });

  return (
    <Modal
      centered
      show={modalSuspensionState !== 'hidden'}
      onHide={onHide}
      className={modalSuspensionState === 'suspended' ? 'suspended' : ''}
    >
      <Modal.Header closeButton>
        <Modal.Title>{t('header.title')}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {t('body.paragraph_text')}{' '}
        <span className={'text-danger'}>
          <Trans t={t} i18nKey={'body.warning_text'} />
        </span>
      </Modal.Body>
      <Modal.Footer>
        <Button variant={'secondary'} onClick={onHide}>
          {t('footer.buttons.cancel.button_text')}
        </Button>
        <Button variant={'danger'} onClick={onDelete} disabled={processing}>
          {processing ? (
            <div className={'d-flex justify-content-center align-items-center'}>
              <Spinner
                as={'span'}
                size={'sm'}
                animation={'border'}
                role={'status'}
                aria-hidden={'true'}
                className={'me-2'}
              />
              {t('footer.buttons.delete_document.deleting_text')}...
            </div>
          ) : (
            <>{t('footer.buttons.delete_document.default')}</>
          )}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
