/**
 * @file DetailsFolderPanel.tsx - Left-side panel of the Processing page that combines the DetailsSection (work item metadata and action buttons) with a hotkeys button and the FolderSection (document folder tree).
 * Registers the CTRL + H hotkey for opening the hotkeys modal.
 */

import { type FC, useState } from 'react';
import { DetailsSection } from './sections/DetailsSection.tsx';
import { FolderSection } from './sections/FolderSection/FolderSection.tsx';
import { Button } from 'react-bootstrap';
import { HotkeysModal } from './modals/HotkeysModal/HotkeysModal.tsx';
import { useHotkeys } from 'react-hotkeys-hook';
import { Key } from 'ts-key-enum';
import { assembleHotKeyString } from '../../../utils/hotKeys.ts';
import { useTranslation } from 'react-i18next';

/**
 * Component that lists work item details and action buttons and displays a tree view for selecting documents to edit.
 * Acts as the left panel layout container within the Processing page's resizable panel group.
 */
export const DetailsFolderPanel: FC = () => {
  const [showHotkeysModal, setShowHotkeysModal] = useState(false);

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

  // Register CTRL + H hotkey to open the hotkeys modal
  useHotkeys(
    assembleHotKeyString([Key.Control], ['h']),
    () => setShowHotkeysModal(true),
    { preventDefault: true, description: `[nav]${t('hotkeys.show_hotkeys')}` }
  );

  return (
    <>
      {/* Work item details section */}
      <DetailsSection />

      {/* Shows the hotkeys modal */}
      <Button
        variant={'outline-secondary'}
        className={'w-100 mb-3'}
        onClick={() => setShowHotkeysModal(true)}
      >
        {t('buttons.show_hotkeys.button_text')} (CTRL + H)
      </Button>
      <HotkeysModal
        show={showHotkeysModal}
        onHide={() => setShowHotkeysModal(false)}
      />

      {/* Folder section */}
      <FolderSection />
    </>
  );
};
