/**
 * @file HotkeysModal.tsx - Modal dialog that displays all registered keyboard shortcuts organized into three categories: navigation, document actions, and page actions.
 * Each category is rendered in its own HotkeyDisplayTable column.
 * Opened via CTRL + H or the hotkeys button in DetailsFolderPanel.
 */

import type { FC } from 'react';
import { Button, Col, Modal, Row } from 'react-bootstrap';
import { useHotkeysContext } from 'react-hotkeys-hook';
import { HotkeyDisplayTable } from './HotkeyDisplayTable';
import { UAParser } from 'ua-parser-js';
import { useTranslation } from 'react-i18next';

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

  /** Callback invoked when the modal should be closed */
  onHide: () => void;
}

/**
 * Bootstrap modal that displays hotkeys with key combinations and descriptions, categorized by purpose.
 * Retrieves all registered hotkeys from the react-hotkeys-hook context and distributes them across three HotkeyDisplayTable instances based on their description prefix.
 */
export const HotkeysModal: FC<HotkeysModalProps> = (props) => {
  const { show, onHide } = props;

  // Retrieve all registered hotkeys from the react-hotkeys-hook context
  const { hotkeys } = useHotkeysContext();

  // Detect OS for platform-specific key name rendering (e.g., CMD vs WIN)
  const { os } = UAParser(navigator.userAgent);

  const { t } = useTranslation(undefined, {
    keyPrefix:
      'components.processing.details_folder_panel.modals.hotkeys.hotkeys_modal',
  });

  return (
    <Modal centered show={show} onHide={onHide} dialogClassName={'modal-w50'}>
      <Modal.Header closeButton>
        <Modal.Title>{t('header.title')}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <p className={'mb-0'}>{t('body.paragraph_text')}</p>
          <small>
            <i>{t('body.small_text')}</i>
          </small>
        </div>
        <hr />
        <Row className={'gap-2 gap-lg-0'}>
          <Col xs={12} lg={4}>
            <HotkeyDisplayTable
              hotkeys={hotkeys}
              title={t('body.tables.navigation.title')}
              descriptionPrefix={'[nav]'}
              os={os}
            />
          </Col>
          <Col xs={12} lg={4}>
            <HotkeyDisplayTable
              hotkeys={hotkeys}
              title={t('body.tables.document_actions.title')}
              descriptionPrefix={'[doc]'}
              os={os}
            />
          </Col>
          <Col xs={12} lg={4}>
            <HotkeyDisplayTable
              hotkeys={hotkeys}
              title={t('body.tables.page_actions.title')}
              descriptionPrefix={'[page]'}
              os={os}
            />
          </Col>
        </Row>
      </Modal.Body>
      <Modal.Footer>
        <Button variant={'secondary'} onClick={onHide}>
          {t('footer.buttons.close.button_text')}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};
