/**
 * @file HotkeyDisplayTable.tsx - Reusable table component for displaying categorized keyboard shortcuts.
 * Formats key combinations with OS-specific modifier names (e.g., CMD on macOS, WIN on Windows) and filters hotkeys by a description prefix category.
 */

import type { Hotkey } from 'react-hotkeys-hook/packages/react-hotkeys-hook/dist/types';
import type { FC } from 'react';
import { Table } from 'react-bootstrap';
import * as UAParser from 'ua-parser-js';
import { useTranslation } from 'react-i18next';

/**
 * Description prefixes used to categorize hotkeys.
 */
export type HotkeyDescriptionPrefix = '[nav]' | '[doc]' | '[page]';

/**
 * Props for the HotkeyDisplayTable component.
 */
interface HotkeyDisplayTableProps {
  /** The full list of registered hotkeys from the react-hotkeys-hook context */
  hotkeys: readonly Hotkey[];

  /** Column header title displayed at the top of the table */
  title: string;

  /** Category prefix used to filter which hotkeys appear in this table */
  descriptionPrefix: HotkeyDescriptionPrefix;

  /** Parsed OS information for rendering platform-specific modifier key names */
  os: UAParser.IOS;
}

const tKey =
  'components.processing.details_folder_panel.modals.hotkeys.hotkey_display_table';

/**
 * Returns a formatted string with the key combination for a given hotkey.
 *
 * @param hotkey Hotkey to get formatted string for
 * @param os Operating system detected from user agent string
 * @returns Formatted key combination string
 */
const getFormattedCombinationString = (hotkey: Hotkey, os: UAParser.IOS) => {
  return `${hotkey.ctrl ? 'CTRL +' : ''} ${hotkey.meta ? `${os.is('Windows') ? 'WIN' : os.is('macOS') ? 'CMD' : 'META'} +` : ''} ${hotkey.shift ? 'SHIFT +' : ''} ${hotkey.alt ? 'ALT +' : ''} ${hotkey.keys
    ?.toString()
    .replace(/^arrow(.*)$/i, '$1 arrow')
    .toUpperCase()}`;
};

/**
 * Small display table for hotkeys with filtering by category (description prefix).
 * Only hotkeys whose description starts with the given prefix are shown.
 * The prefix is stripped from the displayed description text.
 */
export const HotkeyDisplayTable: FC<HotkeyDisplayTableProps> = (props) => {
  const { hotkeys, title, descriptionPrefix, os } = props;

  const { t } = useTranslation(undefined, {
    keyPrefix: tKey,
  });

  return (
    <Table striped bordered hover size={'sm'}>
      <thead className={'text-center'}>
        <tr>
          <th colSpan={2}>{title}</th>
        </tr>
        <tr>
          <th className={'fw-normal'}>
            <i>{t('table.header.key_combination')}</i>
          </th>
          <th className={'fw-normal'}>
            <i>{t('table.header.description')}</i>
          </th>
        </tr>
      </thead>
      <tbody>
        {hotkeys
          .filter((hotkey) => hotkey.description?.startsWith(descriptionPrefix))
          .map((hotkey, index) => (
            <tr key={index}>
              <td>{getFormattedCombinationString(hotkey, os)}</td>
              <td>{hotkey.description?.replace(descriptionPrefix, '')}</td>
            </tr>
          ))}
      </tbody>
    </Table>
  );
};
