import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "."
import { componentDoc } from "@/lib/storybook"

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  name: "Default (single)",
  render: () => ({
    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
    template: `
      <Accordion type="single" collapsible default-value="item-1" class="w-96">
        <AccordionItem value="item-1">
          <AccordionTrigger>Is it accessible?</AccordionTrigger>
          <AccordionContent>Yes. It uses reka-ui under the hood and follows WAI-ARIA patterns.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it styled?</AccordionTrigger>
          <AccordionContent>Yes. It comes with default styles matching the rest of the kit.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Is it animated?</AccordionTrigger>
          <AccordionContent>Yes, by default open/close uses CSS animations.</AccordionContent>
        </AccordionItem>
      </Accordion>
    `,
  }),
}

export const Multiple: Story = {
  name: "Multiple",
  render: () => ({
    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
    template: `
      <Accordion type="multiple" :default-value="['item-1', 'item-2']" class="w-96">
        <AccordionItem value="item-1">
          <AccordionTrigger>Section 1</AccordionTrigger>
          <AccordionContent>Body 1</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Section 2</AccordionTrigger>
          <AccordionContent>Body 2</AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger>Section 3</AccordionTrigger>
          <AccordionContent>Body 3</AccordionContent>
        </AccordionItem>
      </Accordion>
    `,
  }),
}

export const Collapsible: Story = {
  name: "Collapsible",
  render: () => ({
    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
    template: `
      <Accordion type="single" collapsible class="w-96">
        <AccordionItem value="a">
          <AccordionTrigger>Click me to toggle</AccordionTrigger>
          <AccordionContent>I can be fully collapsed.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="b">
          <AccordionTrigger>And me</AccordionTrigger>
          <AccordionContent>Same here.</AccordionContent>
        </AccordionItem>
      </Accordion>
    `,
  }),
}

export const Disabled: Story = {
  name: "Disabled Item",
  render: () => ({
    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
    template: `
      <Accordion type="single" collapsible class="w-96">
        <AccordionItem value="a">
          <AccordionTrigger>Active</AccordionTrigger>
          <AccordionContent>Open me.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="b" disabled>
          <AccordionTrigger>Disabled</AccordionTrigger>
          <AccordionContent>Should not open.</AccordionContent>
        </AccordionItem>
      </Accordion>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Accordion, AccordionItem, AccordionTrigger, AccordionContent },
    template: `
      <div class="space-y-8">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Single</h3>
          <Accordion type="single" collapsible default-value="s1" class="w-96">
            <AccordionItem value="s1">
              <AccordionTrigger>First</AccordionTrigger>
              <AccordionContent>First body.</AccordionContent>
            </AccordionItem>
            <AccordionItem value="s2">
              <AccordionTrigger>Second</AccordionTrigger>
              <AccordionContent>Second body.</AccordionContent>
            </AccordionItem>
          </Accordion>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Multiple</h3>
          <Accordion type="multiple" :default-value="['m1', 'm2']" class="w-96">
            <AccordionItem value="m1">
              <AccordionTrigger>Multi 1</AccordionTrigger>
              <AccordionContent>Body 1</AccordionContent>
            </AccordionItem>
            <AccordionItem value="m2">
              <AccordionTrigger>Multi 2</AccordionTrigger>
              <AccordionContent>Body 2</AccordionContent>
            </AccordionItem>
          </Accordion>
        </section>
      </div>
    `,
  }),
}
