import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '../components/ui/accordion'

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

const meta = {
  title: 'UI/Accordion',
  component: Accordion,
  parameters: {},
  args: {
    type: 'single',
    collapsible: false,
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Accordion>

export default meta
type Story = StoryObj<typeof meta>

export const NonCollapsible: Story = {
  args: {
    type: 'single',
    collapsible: false,
  },
  render: args => (
    <Accordion {...args}>
      <AccordionItem value="item-2">
        <AccordionTrigger>Can i collapse this?</AccordionTrigger>
        <AccordionContent>
          No. When you set the collapsible prop to false, the accordion is not
          collapsible.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  ),
}

export const Collapsible: Story = {
  args: {
    type: 'single',
    collapsible: true,
  },
  render: args => (
    <Accordion {...args}>
      <AccordionItem value="item-2">
        <AccordionTrigger>Can i collapse this?</AccordionTrigger>
        <AccordionContent>
          Yes. When you set the collapsible prop to true, you can collapse the
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  ),
}

export const Single: Story = {
  args: {
    type: 'single',
  },
  render: args => (
    <Accordion {...args}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Single item only</AccordionTrigger>
        <AccordionContent>
          With the single type, only one item can be open at a time.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Another item</AccordionTrigger>
        <AccordionContent>
          Opening this item will close the previous one.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  ),
}

export const Multiple: Story = {
  args: {
    type: 'multiple',
  },
  render: args => (
    <Accordion {...args}>
      <AccordionItem value="item-1">
        <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
        <AccordionContent>
          Yes, you can open multiple items at the same time with the multiple
          type.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it customizable?</AccordionTrigger>
        <AccordionContent>
          Yes, you can customize the styling and behavior to match your needs.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-1">
        <AccordionTrigger>Long content example</AccordionTrigger>
        <AccordionContent>
          <div className="space-y-4">
            <p>
              This is a longer content example that demonstrates how the
              accordion handles substantial amounts of text and content.
            </p>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </p>
            <ul className="list-disc list-inside space-y-1">
              <li>First item in the list</li>
              <li>Second item in the list</li>
              <li>Third item in the list</li>
            </ul>
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  ),
}
