'use client';

import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
import {Item} from '@astryxdesign/core/Item';
import {Kbd} from '@astryxdesign/core/Kbd';
import {HStack, VStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {
  SHORTCUT_GROUPS,
  WORKSPACE_SHORTCUTS,
} from '@/shared/layouts/workspace/shortcuts';

/**
 * The shortcuts sheet, opened from the account menu's Help panel (or by the
 * shortcut it lists for itself).
 *
 * It renders WORKSPACE_SHORTCUTS directly. Nothing is typed in twice, so the
 * list cannot describe a binding the app does not have — which is the failure
 * mode of every hand-written shortcuts dialog.
 */
export function KeyboardShortcutsDialog({
  isOpen,
  onClose,
}: {
  isOpen: boolean;
  onClose: () => void;
}) {
  return (
    <Dialog
      isOpen={isOpen}
      onOpenChange={(open) => (open ? undefined : onClose())}
      purpose="info"
      width={480}
      aria-label="Keyboard shortcuts"
    >
      <VStack gap={4} width="100%">
        <DialogHeader
          title="Keyboard shortcuts"
          subtitle="Every binding the workspace answers to."
          onOpenChange={(open) => (open ? undefined : onClose())}
        />

        {SHORTCUT_GROUPS.map((group) => (
          <VStack gap={1} key={group} width="100%">
            <HStack paddingInline={2}>
              <Text type="supporting" size="sm" weight="medium">
                {group}
              </Text>
            </HStack>
            {WORKSPACE_SHORTCUTS.filter(
              (shortcut) => shortcut.group === group,
            ).map((shortcut) => (
              <Item
                key={shortcut.keys}
                label={shortcut.label}
                density="balanced"
                endContent={<Kbd keys={shortcut.keys} />}
              />
            ))}
          </VStack>
        ))}
      </VStack>
    </Dialog>
  );
}
