import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { CalendarIcon, SettingsIcon, SmileIcon, UserIcon } from 'lucide-react';

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from './command';
import { Button } from '../button/button';

const meta = {
  title: 'Components/Command',
  component: Command,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Filterable command list. Use it inline for a searchable list, or wrap it in `CommandDialog` for a ⌘K palette. Each item declares the text it is matched on through `value`, plus optional `keywords` for synonyms the label does not contain.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Command>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Inline: Story = {
  render: () => (
    <Command className="w-80 rounded-lg border shadow-md">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem value="Calendar">
            <CalendarIcon />
            Calendar
          </CommandItem>
          <CommandItem value="Search emoji">
            <SmileIcon />
            Search emoji
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem value="Profile">
            <UserIcon />
            Profile
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem value="Preferences">
            <SettingsIcon />
            Preferences
            <CommandShortcut>⌘,</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  ),
};

/** `keywords` match terms the visible label does not contain. */
export const WithKeywords: Story = {
  render: () => (
    <Command className="w-80 rounded-lg border shadow-md">
      <CommandInput placeholder="Try typing “dark” or “logout”…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Commands">
          <CommandItem value="Toggle theme" keywords={['dark', 'light', 'appearance']}>
            Toggle theme
          </CommandItem>
          <CommandItem value="Sign out" keywords={['logout', 'exit']}>
            Sign out
          </CommandItem>
          <CommandItem value="Billing" disabled>
            Billing (unavailable)
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  ),
};

/** The palette pattern: bind ⌘K yourself and let the dialog handle the rest. */
export const Palette: Story = {
  render: function PaletteStory() {
    const [open, setOpen] = React.useState(false);

    React.useEffect(() => {
      const onKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
          event.preventDefault();
          setOpen((value) => !value);
        }
      };
      document.addEventListener('keydown', onKeyDown);
      return () => document.removeEventListener('keydown', onKeyDown);
    }, []);

    return (
      <>
        <Button variant="outline" onClick={() => setOpen(true)}>
          Open palette <CommandShortcut>⌘K</CommandShortcut>
        </Button>
        <CommandDialog open={open} onOpenChange={setOpen}>
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Navigation">
              <CommandItem value="Go to dashboard" onSelect={() => setOpen(false)}>
                Go to dashboard
              </CommandItem>
              <CommandItem value="Go to settings" onSelect={() => setOpen(false)}>
                Go to settings
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </CommandDialog>
      </>
    );
  },
};