import type { Meta, StoryObj } from "@storybook/react"
import { useState } from "react"
import { Button } from "../../action/button/Button"
import { SvgUse } from "../../shared/SvgUse"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  CollapsibleWithChevron,
} from "./Collapsible"

/**
 * A component that allows users to toggle the visibility of content with smooth animations.
 * Use CollapsibleWithChevron for automatic state management and chevron behavior.
 */
const meta = {
  title: "base/action/Collapsible",
  component: Collapsible,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Collapsible>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Automatic collapsible with built-in state and chevron - no useState needed!
 * Features smooth height animation.
 */
export const Automatic: Story = {
  render: () => (
    <CollapsibleWithChevron
      trigger={
        <Button variant="outline" className="w-full justify-between">
          Click to toggle
        </Button>
      }
      className="w-[350px]"
    >
      <CollapsibleContent>
        <div className="rounded-md bg-secondary-50 p-4 mt-2">
          <p>No useState needed! The chevron appears automatically.</p>
          <p className="mt-2 text-sm text-gray-600">
            Notice the smooth height animation when toggling.
          </p>
        </div>
      </CollapsibleContent>
    </CollapsibleWithChevron>
  ),
}

/**
 * FAQ style with custom chevron styling and animation.
 */
export const FAQ: Story = {
  render: () => (
    <CollapsibleWithChevron
      trigger={
        <Button variant="ghost" className="w-full justify-between">
          What is this?
        </Button>
      }
      chevronClassName="size-4 text-blue-600"
      className="w-[350px]"
    >
      <CollapsibleContent>
        <div className="p-4">
          <p>This is the answer to your question.</p>
          <p className="mt-2 text-sm text-gray-600">The content smoothly animates in and out.</p>
        </div>
      </CollapsibleContent>
    </CollapsibleWithChevron>
  ),
}

/**
 * Multiple automatic collapsibles with animations.
 */
export const Multiple: Story = {
  render: () => (
    <div className="w-[350px] space-y-2">
      <CollapsibleWithChevron
        trigger={
          <Button variant="outline" className="w-full justify-between">
            Section 1
          </Button>
        }
      >
        <CollapsibleContent>
          <div className="rounded-md bg-secondary-50 p-4 mt-2">
            <p>Content 1</p>
            <p className="mt-2 text-sm text-gray-600">Each section animates independently.</p>
          </div>
        </CollapsibleContent>
      </CollapsibleWithChevron>

      <CollapsibleWithChevron
        trigger={
          <Button variant="outline" className="w-full justify-between">
            Section 2
          </Button>
        }
      >
        <CollapsibleContent>
          <div className="rounded-md bg-secondary-50 p-4 mt-2">
            <p>Content 2</p>
            <p className="mt-2 text-sm text-gray-600">
              Try opening multiple sections to see the smooth animations.
            </p>
          </div>
        </CollapsibleContent>
      </CollapsibleWithChevron>
    </div>
  ),
}

/**
 * Manual usage with useState (for comparison) - also animated.
 */
export const Manual: Story = {
  render: () => {
    const [open, setOpen] = useState(false)

    return (
      <Collapsible open={open} onOpenChange={setOpen} className="w-[350px]">
        <CollapsibleTrigger asChild>
          <Button variant="outline" className="w-full justify-between">
            Manual with useState
            {open ? (
              <SvgUse icon="chevron-up" className="size-4" />
            ) : (
              <SvgUse icon="chevron-down" className="size-4" />
            )}
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="rounded-md bg-secondary-50 p-4 mt-2">
            <p>This requires useState boilerplate.</p>
            <p className="mt-2 text-sm text-gray-600">But still has the same smooth animation!</p>
          </div>
        </CollapsibleContent>
      </Collapsible>
    )
  },
}

/**
 * Without chevron but with animation.
 */
export const WithoutChevron: Story = {
  render: () => (
    <Collapsible className="w-[350px]">
      <CollapsibleTrigger asChild>
        <Button variant="outline" className="w-full">
          No chevron
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="rounded-md bg-secondary-50 p-4 mt-2">
          <p>Simple collapsible without chevron.</p>
          <p className="mt-2 text-sm text-gray-600">Still has smooth height animation.</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  ),
}

/**
 * Long content to demonstrate smooth scrolling animation.
 */
export const LongContent: Story = {
  render: () => (
    <CollapsibleWithChevron
      trigger={
        <Button variant="outline" className="w-full justify-between">
          Long content example
        </Button>
      }
      className="w-[350px]"
    >
      <CollapsibleContent>
        <div className="rounded-md bg-secondary-50 p-4 mt-2 space-y-3">
          <p>
            This is a longer content example to show how the animation handles different content
            heights.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.
          </p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.
          </p>
          <p className="text-sm text-gray-600">
            The animation smoothly adjusts to the content height.
          </p>
        </div>
      </CollapsibleContent>
    </CollapsibleWithChevron>
  ),
}