Command

'use client'

import { FilePlus, Search, Settings, UserPlus } from 'lucide-react'
import { useEffect, useState } from 'react'
import { Button } from '@/components/ui/button'
import {
  Command,
  CommandCollection,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from '@/components/ui/command'

type Item = { value: string; label: string; icon: typeof Search; shortcut?: string }
type Group = { value: string; items: Item[] }

const groups: Group[] = [
  {
    value: 'Create',
    items: [
      { value: 'new-invoice', label: 'New invoice', icon: FilePlus, shortcut: 'N' },
      { value: 'invite', label: 'Invite teammate', icon: UserPlus },
    ],
  },
  {
    value: 'Go to',
    items: [
      { value: 'search', label: 'Search customers', icon: Search },
      { value: 'settings', label: 'Settings', icon: Settings, shortcut: ',' },
    ],
  },
]

export default function CommandBasic() {
  const [open, setOpen] = useState(false)

  // Cmd/Ctrl+K opens the palette.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((o) => !o)
      }
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [])

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open command palette
        <kbd className="ml-2 rounded-sm bg-muted px-1.5 font-mono text-caption">⌘K</kbd>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Command items={groups}>
          <CommandInput aria-label="Search commands" placeholder="Type a command or search…" />
          <CommandEmpty>No results.</CommandEmpty>
          <CommandList>
            {(group: Group) => (
              <CommandGroup key={group.value} items={group.items} heading={group.value}>
                <CommandCollection>
                  {(item: Item) => (
                    <CommandItem key={item.value} value={item} onClick={() => setOpen(false)}>
                      <item.icon aria-hidden="true" />
                      {item.label}
                      {item.shortcut ? <CommandShortcut>⌘{item.shortcut}</CommandShortcut> : null}
                    </CommandItem>
                  )}
                </CommandCollection>
              </CommandGroup>
            )}
          </CommandList>
        </Command>
      </CommandDialog>
    </>
  )
}