import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "@lucide/vue"
import { ref } from "vue"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "."
import { Button } from "../button"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Command",
  component: Command,
  tags: ["autodocs"],
  parameters: componentDoc("Command"),
} satisfies Meta<typeof Command>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: {
      Command,
      CommandEmpty,
      CommandGroup,
      CommandInput,
      CommandItem,
      CommandList,
      CommandSeparator,
      Calendar,
      Smile,
      Calculator,
    },
    template: `
      <Command class="rounded-lg border shadow-md md:min-w-[450px]">
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem value="calendar"><Calendar /> Calendar</CommandItem>
            <CommandItem value="search-emoji"><Smile /> Search Emoji</CommandItem>
            <CommandItem value="calculator"><Calculator /> Calculator</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    `,
  }),
}

export const Empty: Story = {
  name: "Empty State",
  render: () => ({
    components: {
      Command,
      CommandEmpty,
      CommandInput,
      CommandList,
    },
    template: `
      <Command class="rounded-lg border shadow-md md:min-w-[450px]">
        <CommandInput placeholder="Type 'zzz' to see empty state..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
        </CommandList>
      </Command>
    `,
  }),
}

export const Groups: Story = {
  name: "With Groups",
  render: () => ({
    components: {
      Command,
      CommandEmpty,
      CommandGroup,
      CommandInput,
      CommandItem,
      CommandList,
      CommandSeparator,
      User,
      CreditCard,
      Settings,
    },
    template: `
      <Command class="rounded-lg border shadow-md md:min-w-[450px]">
        <CommandInput placeholder="Search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem value="calendar">Calendar</CommandItem>
            <CommandItem value="search">Search</CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Settings">
            <CommandItem value="profile"><User /> Profile</CommandItem>
            <CommandItem value="billing"><CreditCard /> Billing</CommandItem>
            <CommandItem value="settings"><Settings /> Settings</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    `,
  }),
}

export const AsCommandDialog: Story = {
  name: "As Command Dialog (Cmd+K)",
  render: () => ({
    components: {
      CommandDialog,
      CommandEmpty,
      CommandGroup,
      CommandInput,
      CommandItem,
      CommandList,
      Button,
    },
    setup() {
      const open = ref(false)
      function toggle(): void {
        open.value = !open.value
      }
      return { open, toggle }
    },
    template: `
      <div>
        <Button @click="toggle">Press to open</Button>
        <CommandDialog v-model:open="open">
          <CommandInput placeholder="Type a command or search..." />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem value="calendar">Calendar</CommandItem>
              <CommandItem value="search">Search</CommandItem>
              <CommandItem value="calculator">Calculator</CommandItem>
            </CommandGroup>
          </CommandList>
        </CommandDialog>
      </div>
    `,
  }),
}

export const WithShortcuts: Story = {
  name: "With Shortcuts",
  render: () => ({
    components: {
      Command,
      CommandGroup,
      CommandInput,
      CommandItem,
      CommandList,
      CommandShortcut,
    },
    template: `
      <Command class="rounded-lg border shadow-md md:min-w-[450px]">
        <CommandInput placeholder="Search..." />
        <CommandList>
          <CommandGroup heading="Suggestions">
            <CommandItem value="profile">
              Profile
              <CommandShortcut>⇧⌘P</CommandShortcut>
            </CommandItem>
            <CommandItem value="billing">
              Billing
              <CommandShortcut>⌘B</CommandShortcut>
            </CommandItem>
            <CommandItem value="settings">
              Settings
              <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: {
      Command,
      CommandEmpty,
      CommandGroup,
      CommandInput,
      CommandItem,
      CommandList,
      CommandSeparator,
      CommandShortcut,
      Calendar,
      Smile,
      User,
      CreditCard,
      Settings,
    },
    template: `
      <Command class="rounded-lg border shadow-md md:min-w-[480px]">
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem value="calendar"><Calendar /> Calendar</CommandItem>
            <CommandItem value="search-emoji"><Smile /> Search Emoji</CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Settings">
            <CommandItem value="profile"><User /> Profile <CommandShortcut>⇧⌘P</CommandShortcut></CommandItem>
            <CommandItem value="billing"><CreditCard /> Billing <CommandShortcut>⌘B</CommandShortcut></CommandItem>
            <CommandItem value="settings"><Settings /> Settings <CommandShortcut>⌘S</CommandShortcut></CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    `,
  }),
}
