import { useState } from "react";
import { Collapse } from "./index";

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

const meta: Meta<typeof Collapse> = {
  title: "Components/Collapse",
  component: Collapse,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A collapsible component with smooth height and opacity transitions. Used to show/hide content with animations.",
      },
    },
  },
  argTypes: {
    open: {
      control: { type: "boolean" },
      description: "Whether the collapse is open",
    },
    children: {
      control: { type: "text" },
      description: "Content to collapse/expand",
    },
  },
  args: {
    open: true,
    children: "This is collapsible content that can be shown or hidden.",
  },
};

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

// Open collapse
export const Open: Story = {
  args: {
    open: true,
    children: (
      <div className="bg-surface-secondary rounded p-4">
        <p className="body2 text-text">
          This content is visible because the collapse is open.
        </p>
      </div>
    ),
  },
};

// Closed collapse
export const Closed: Story = {
  args: {
    open: false,
    children: (
      <div className="bg-surface-secondary rounded p-4">
        <p className="body2 text-text">
          This content is hidden because the collapse is closed.
        </p>
      </div>
    ),
  },
};

// With content
export const WithContent: Story = {
  args: {
    open: true,
    children: (
      <div className="bg-surface-secondary space-y-2 rounded p-4">
        <h4 className="subheading2 text-text">Collapsible Section</h4>
        <p className="body2 text-text">
          This collapse contains multiple elements and demonstrates how it
          handles different content types.
        </p>
        <ul className="list-disc space-y-1 pl-5">
          <li className="body3 text-text-secondary">Item 1</li>
          <li className="body3 text-text-secondary">Item 2</li>
          <li className="body3 text-text-secondary">Item 3</li>
        </ul>
      </div>
    ),
  },
};

// Interactive collapse
export const Interactive: Story = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <div className="space-y-4">
        <button
          onClick={() => setOpen(!open)}
          className="bg-fill-brand text-inverse rounded px-4 py-2"
        >
          {open ? "Close" : "Open"} Collapse
        </button>
        <Collapse open={open}>
          <div className="bg-surface-secondary rounded p-4">
            <p className="body2 text-text">
              This content can be toggled by clicking the button above. The
              collapse animates smoothly between open and closed states.
            </p>
          </div>
        </Collapse>
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story:
          "Interactive collapse that can be toggled. Notice the smooth height and opacity transitions.",
      },
    },
  },
};

// Long content
export const LongContent: Story = {
  args: {
    open: true,
    children: (
      <div className="bg-surface-secondary space-y-4 rounded p-4">
        <h4 className="subheading2 text-text">Long Content Section</h4>
        <p className="body2 text-text">
          This collapse demonstrates how it handles longer content. The height
          will adjust automatically based on the content size.
        </p>
        <div className="space-y-2">
          <p className="body3 text-text-secondary">
            Paragraph 1: Additional content to show height adjustment.
          </p>
          <p className="body3 text-text-secondary">
            Paragraph 2: More content to demonstrate the collapse behavior.
          </p>
          <p className="body3 text-text-secondary">
            Paragraph 3: Even more content to show how the component adapts.
          </p>
        </div>
      </div>
    ),
  },
};

// Transition states
export const TransitionStates: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    return (
      <div className="space-y-4">
        <div className="flex gap-2">
          <button
            onClick={() => setOpen(true)}
            className="bg-fill-brand text-inverse rounded px-4 py-2"
          >
            Open
          </button>
          <button
            onClick={() => setOpen(false)}
            className="bg-surface-secondary rounded px-4 py-2 text-text"
          >
            Close
          </button>
        </div>
        <Collapse open={open}>
          <div className="bg-surface-secondary border-border-default rounded border p-4">
            <p className="body2 text-text">
              Watch the smooth transition as this content opens and closes. The
              collapse uses both height and opacity animations for a polished
              effect.
            </p>
          </div>
        </Collapse>
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story:
          "Demonstrates the smooth transition animations when opening and closing.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => {
    const [open1, setOpen1] = useState(true);
    const [open2, setOpen2] = useState(false);
    return (
      <div className="space-y-6">
        <div>
          <h3 className="mb-3 text-lg font-semibold">Open State</h3>
          <Collapse open={true}>
            <div className="bg-surface-secondary rounded p-4">
              <p className="body2 text-text">This collapse is open.</p>
            </div>
          </Collapse>
        </div>
        <div>
          <h3 className="mb-3 text-lg font-semibold">Closed State</h3>
          <Collapse open={false}>
            <div className="bg-surface-secondary rounded p-4">
              <p className="body2 text-text">This collapse is closed.</p>
            </div>
          </Collapse>
        </div>
        <div>
          <h3 className="mb-3 text-lg font-semibold">Interactive Examples</h3>
          <div className="space-y-4">
            <div>
              <button
                onClick={() => setOpen1(!open1)}
                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
              >
                Toggle Collapse 1
              </button>
              <Collapse open={open1}>
                <div className="bg-surface-secondary rounded p-4">
                  <p className="body2 text-text">Interactive collapse 1</p>
                </div>
              </Collapse>
            </div>
            <div>
              <button
                onClick={() => setOpen2(!open2)}
                className="bg-fill-brand text-inverse mb-2 rounded px-4 py-2 text-sm"
              >
                Toggle Collapse 2
              </button>
              <Collapse open={open2}>
                <div className="bg-surface-secondary rounded p-4">
                  <p className="body2 text-text">Interactive collapse 2</p>
                </div>
              </Collapse>
            </div>
          </div>
        </div>
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: "Showcase of all collapse states and interactive examples.",
      },
    },
  },
};