import type { Meta, StoryObj } from '@storybook/react-vite'

import {
  CommandPalette,
  CommandPaletteEmpty,
  CommandPaletteDialog,
  CommandPaletteGroup,
  CommandPaletteInput,
  CommandPaletteItem,
  CommandPaletteList,
  CommandPaletteSeparator,
  CommandPaletteShortcut,
} from './command-palette'
import { CalendarIcon, EnvelopeClosedIcon, FaceIcon, GearIcon, PersonIcon, RocketIcon } from '@radix-ui/react-icons'
import { useEffect, useState } from 'react'

const meta = {
  title: 'Command Palette',
  component: CommandPalette,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component:
          'The Command Palette component is used to display a list of commands or actions that can be triggered by the user.',
      },
    },
  },
} satisfies Meta<typeof CommandPalette>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A basic command palette with grouped items and keyboard shortcuts.',
      },
    },
  },
  render: () => (
    <div className="flex items-center justify-center">
      <CommandPalette className="rounded-lg border shadow-md md:min-w-[450px]">
        <CommandPaletteInput placeholder="Type a command or search..." />
        <CommandPaletteList>
          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
          <CommandPaletteGroup heading="Suggestions">
            <CommandPaletteItem>
              <CalendarIcon className="mr-2 h-4 w-4" />
              <span>Calendar</span>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <FaceIcon className="mr-2 h-4 w-4" />
              <span>Search Emoji</span>
            </CommandPaletteItem>
            <CommandPaletteItem disabled>
              <RocketIcon className="mr-2 h-4 w-4" />
              <span>Launch</span>
            </CommandPaletteItem>
          </CommandPaletteGroup>
          <CommandPaletteSeparator />
          <CommandPaletteGroup heading="Settings">
            <CommandPaletteItem>
              <PersonIcon className="mr-2 h-4 w-4" />
              <span>Profile</span>
              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
              <span>Mail</span>
              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <GearIcon className="mr-2 h-4 w-4" />
              <span>Settings</span>
              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
            </CommandPaletteItem>
          </CommandPaletteGroup>
        </CommandPaletteList>
      </CommandPalette>
    </div>
  ),
}

const CommandPaletteDialogExample = () => {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])

  return (
    <div className="flex items-center justify-center">
      <p className="text-sm text-muted-foreground">
        Press{' '}
        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
          <span className="text-xs">⌘</span>J
        </kbd>
      </p>
      <CommandPaletteDialog open={open} onOpenChange={setOpen}>
        <CommandPaletteInput placeholder="Type a command or search..." />
        <CommandPaletteList>
          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
          <CommandPaletteGroup heading="Suggestions">
            <CommandPaletteItem>
              <CalendarIcon className="mr-2 h-4 w-4" />
              <span>Calendar</span>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <FaceIcon className="mr-2 h-4 w-4" />
              <span>Search Emoji</span>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <RocketIcon className="mr-2 h-4 w-4" />
              <span>Launch</span>
            </CommandPaletteItem>
          </CommandPaletteGroup>
          <CommandPaletteSeparator />
          <CommandPaletteGroup heading="Settings">
            <CommandPaletteItem>
              <PersonIcon className="mr-2 h-4 w-4" />
              <span>Profile</span>
              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
              <span>Mail</span>
              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
            </CommandPaletteItem>
            <CommandPaletteItem>
              <GearIcon className="mr-2 h-4 w-4" />
              <span>Settings</span>
              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
            </CommandPaletteItem>
          </CommandPaletteGroup>
        </CommandPaletteList>
      </CommandPaletteDialog>
    </div>
  )
}

export const Dialog: Story = {
  parameters: {
    docs: {
      description: {
        story: 'Command palette displayed in a dialog that can be opened with ⌘J keyboard shortcut.',
      },
    },
  },
  render: () => <CommandPaletteDialogExample />,
}
