import { Meta, StoryObj } from "@storybook/react"
import React, { useCallback, useState } from "react"
import { classNames } from "../../utils"
import { Checkbox } from "../Checkbox"
import { Command } from "../Command"
import { Collapsible, CollapsibleProps } from "./Collapsible"

type Story = StoryObj<typeof Collapsible>

const meta: Meta<typeof Collapsible> = {
  title: "Design System/Collapsible",
  component: Collapsible,
  render: Template,
}

function Template({
  className,
  ...args
}: { content?: CollapsibleProps["content"] } & Omit<
  CollapsibleProps,
  "content"
>) {
  const [values, setValues] = useState<string[]>([])

  const onSelect = useCallback(
    (value: string) =>
      setValues(values =>
        values.includes(value)
          ? values.filter(v => v !== value)
          : [...values, value],
      ),
    [],
  )

  return (
    <Collapsible
      className={classNames("w-full", className)}
      content={
        <Command className="py-2">
          <Command.Input placeholder="Select a collection..." />
          <Command.List>
            <Command.Empty>No results found.</Command.Empty>
            <Command.Item value="bayc" onSelect={onSelect}>
              <Checkbox checked={values.includes("bayc")} />
              <Command.Item.Content>
                <Command.Item.Title>BAYC</Command.Item.Title>
              </Command.Item.Content>
            </Command.Item>
            <Command.Item value="coolcats" onSelect={onSelect}>
              <Checkbox checked={values.includes("coolcats")} />
              <Command.Item.Content>
                <Command.Item.Title>Cool cats</Command.Item.Title>
              </Command.Item.Content>
            </Command.Item>
            <Command.Item value="azuki" onSelect={onSelect}>
              <Checkbox checked={values.includes("azuki")} />
              <Command.Item.Content>
                <Command.Item.Title>Azuki</Command.Item.Title>
              </Command.Item.Content>
            </Command.Item>
          </Command.List>
        </Command>
      }
      {...args}
    >
      Filter
    </Collapsible>
  )
}

export default meta

export const SearchFilter: Story = {}

export const LockedOpen: Story = {
  args: {
    locked: true,
    open: true,
  },
}

export const LockedUnopen: Story = {
  args: {
    locked: true,
    open: false,
  },
}

export const ToggleClosedDirectionRight: Story = {
  args: {
    toggleClosedDirection: "right",
  },
}