CommandMenu

import React from 'react';
import { CommandMenu, type CommandMenuItemData } from '@mildang/design-system/unofficial/CommandMenu';
import { Button } from '@mildang/design-system/Button';
import AssignmentIcon from '@mildang/icons/react/assignment';
import NotesIcon from '@mildang/icons/react/editor/notes';

const sampleTabs: Array<{ id: string; title: string; subtitle?: string; description?: string; icon: React.ReactNode }> = [
  { id: 'tab-1', title: 'CommandMenu.stories.tsx', subtitle: 'packages/design-system/src/ui/CommandMenu', icon: <AssignmentIcon />, description: 'Enter' },
  { id: 'tab-2', title: 'CommandMenu.ts', subtitle: 'packages/design-system/src/preset/recipes', icon: <AssignmentIcon /> },
  { id: 'tab-3', title: '학습 활동', subtitle: '챕터 A / 모듈 1', icon: <NotesIcon /> },
  { id: 'tab-4', title: '학습 활동', subtitle: '챕터 B / 모듈 2', icon: <NotesIcon /> },
];

const sampleCommands: Array<{ id: string; title: string; description?: string }> = [
  { id: 'close-window', title: '창 닫기', description: '⌘ W' },
  { id: 'close-all-windows', title: '모든 창 닫기', description: '⌘ Shift W' },
  { id: 'save', title: '저장', description: '⌘ S' },
  { id: 'save-all', title: '모두 저장', description: '⌘ Shift S' },
  { id: 'save-as', title: '다른 이름으로 저장', description: '⌘ Shift A' },
];

const CommandMenuDefaultExample = function Default() {
    const [open, setOpen] = React.useState(true);
    const [inputValue, setInputValue] = React.useState('');

    const isCommandMode = inputValue.startsWith('>');
    const items: CommandMenuItemData[] = React.useMemo(() => {
      if (isCommandMode) {
        const q = inputValue.slice(1).trim().toLowerCase();
        const filtered = q
          ? sampleCommands.filter((c) => c.title.toLowerCase().includes(q))
          : sampleCommands;
        return filtered.map((c) => ({
          id: c.id,
          title: c.title,
          description: c.description,
          onSelect: () => setOpen(false),
        }));
      }
      const q = inputValue.toLowerCase();
      const filtered = q
        ? sampleTabs.filter((t) => t.title.toLowerCase().includes(q))
        : sampleTabs;
      return filtered.map((t) => ({
        id: t.id,
        icon: t.icon,
        title: t.title,
        subtitle: t.subtitle,
        description: t.description,
        onSelect: () => setOpen(false),
      }));
    }, [inputValue, isCommandMode]);

    return (
      <>
        <Button variant="tertiary" onClick={() => setOpen(true)}>
          Open CommandMenu
        </Button>
        <CommandMenu
          open={open}
          onOpenChange={(next) => {
            setOpen(next);
            if (!next) setInputValue('');
          }}
          inputValue={inputValue}
          onInputValueChange={setInputValue}
          items={items}
          placeholder="목록 검색 ( > 로 명령어)"
          emptyMessage={isCommandMode ? '일치하는 명령어가 없습니다.' : '일치하는 목록이 없습니다.'}
          ariaLabel="커맨드 메뉴"
        />
      </>
    );
  };

export default CommandMenuDefaultExample;