import { Accordion } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Accordion> = {
  title: "Components/Accordion",
  component: Accordion,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A collapsible accordion component that can expand and collapse content sections with smooth animations.",
      },
    },
  },
  argTypes: {
    title: {
      control: { type: "text" },
      description: "Title text displayed in the accordion header",
    },
    defaultOpen: {
      control: { type: "boolean" },
      description: "Whether the accordion is open by default",
    },
    containerClassName: {
      control: { type: "text" },
      description: "Additional CSS classes for the container",
    },
    titleClassName: {
      control: { type: "text" },
      description: "Additional CSS classes for the title",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes for the content area",
    },
    buttonClassName: {
      control: { type: "text" },
      description: "Additional CSS classes for the button",
    },
  },
  args: {
    title: "Accordion Title",
    defaultOpen: false,
    children:
      "This is the accordion content that can be expanded or collapsed.",
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

// Default accordion
export const Default: Story = {
  args: {},
};

// Accordion with content
export const WithContent: Story = {
  args: {
    title: "Frequently Asked Questions",
    children: (
      <div className="space-y-2">
        <p className="body2 text-text">
          This accordion contains detailed information that can be expanded or
          collapsed by clicking the header.
        </p>
        <p className="body3 text-text-secondary">
          You can include any content here, such as text, images, forms, or
          other components.
        </p>
      </div>
    ),
  },
};

// Default open accordion
export const DefaultOpen: Story = {
  args: {
    title: "Open by Default",
    defaultOpen: true,
    children: (
      <div className="space-y-2">
        <p className="body2 text-text">
          This accordion is open by default when the page loads.
        </p>
        <p className="body3 text-text-secondary">
          Use the defaultOpen prop to control the initial state.
        </p>
      </div>
    ),
  },
};

// Multiple accordions
export const Multiple: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-4">
      <Accordion title="First Section">
        <p className="body2 text-text">
          Content for the first accordion section.
        </p>
      </Accordion>
      <Accordion title="Second Section" defaultOpen>
        <p className="body2 text-text">
          Content for the second accordion section. This one is open by default.
        </p>
      </Accordion>
      <Accordion title="Third Section">
        <p className="body2 text-text">
          Content for the third accordion section.
        </p>
      </Accordion>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Multiple accordions used together to create an FAQ or content section.",
      },
    },
  },
};

// Custom styling
export const CustomStyling: Story = {
  args: {
    title: "Custom Styled Accordion",
    containerClassName: "border-2 border-border-brand",
    titleClassName: "text-text-brand font-bold",
    buttonClassName: "bg-surface-secondary",
    className: "bg-surface-tertiary",
    children: (
      <div className="space-y-2">
        <p className="body2 text-text">
          This accordion has custom styling applied to different parts.
        </p>
        <ul className="list-disc space-y-1 pl-5">
          <li className="body3 text-text-secondary">Custom container border</li>
          <li className="body3 text-text-secondary">Custom title styling</li>
          <li className="body3 text-text-secondary">
            Custom button background
          </li>
          <li className="body3 text-text-secondary">
            Custom content background
          </li>
        </ul>
      </div>
    ),
  },
};

// Long content
export const LongContent: Story = {
  args: {
    title: "Accordion with Long Content",
    children: (
      <div className="space-y-4">
        <p className="body2 text-text">
          This accordion demonstrates how it handles longer content sections.
          The content area will expand to accommodate all the content, and
          scrolling will be handled naturally within the page.
        </p>
        <div className="space-y-2">
          <h4 className="subheading2 text-text">Subsection 1</h4>
          <p className="body3 text-text-secondary">
            Additional details and information can be placed here.
          </p>
        </div>
        <div className="space-y-2">
          <h4 className="subheading2 text-text">Subsection 2</h4>
          <p className="body3 text-text-secondary">
            More content to demonstrate scrolling behavior.
          </p>
        </div>
        <div className="space-y-2">
          <h4 className="subheading2 text-text">Subsection 3</h4>
          <p className="body3 text-text-secondary">
            Even more content to show how the accordion handles extended content
            areas.
          </p>
        </div>
      </div>
    ),
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-4">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Default State</h3>
        <Accordion title="Closed Accordion">
          <p className="body2 text-text">This accordion starts closed.</p>
        </Accordion>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Open by Default</h3>
        <Accordion title="Open Accordion" defaultOpen>
          <p className="body2 text-text">This accordion starts open.</p>
        </Accordion>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
        <Accordion
          title="Styled Accordion"
          containerClassName="border-2 border-border-brand"
          titleClassName="text-text-brand"
        >
          <p className="body2 text-text">
            This accordion has custom styling applied.
          </p>
        </Accordion>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all accordion variants and states.",
      },
    },
  },
};