import { SeeMore } from "./index";

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

const meta: Meta<typeof SeeMore> = {
  title: "Components/SeeMore",
  component: SeeMore,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "An expandable component that shows/hides a checklist of items with a toggle button.",
      },
    },
  },
  argTypes: {
    list: {
      control: { type: "object" },
      description: "Array of strings to display in the checklist",
    },
    text: {
      control: { type: "text" },
      description: "Text for the toggle button",
    },
  },
  args: {
    list: ["Feature 1", "Feature 2", "Feature 3"],
    text: "See details",
  },
};

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

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

// Expanded by default
export const Expanded: Story = {
  args: {
    list: [
      "High-speed internet connection",
      "24/7 customer support",
      "No data caps",
      "Free installation",
    ],
    text: "See details",
  },
  render: args => (
    <div className="max-w-md w-full">
      <SeeMore {...args} />
    </div>
  ),
};

// Collapsed by default
export const Collapsed: Story = {
  args: {
    list: ["Item 1", "Item 2", "Item 3"],
    text: "Show more",
  },
  render: args => (
    <div className="max-w-md w-full">
      <SeeMore {...args} />
    </div>
  ),
};

// With checklist items
export const WithChecklistItems: Story = {
  args: {
    list: [
      "Unlimited data usage",
      "Free router included",
      "24/7 technical support",
      "No long-term contract",
      "30-day money-back guarantee",
    ],
    text: "View all features",
  },
  render: args => (
    <div className="max-w-md w-full">
      <SeeMore {...args} />
    </div>
  ),
};

// Custom button text
export const CustomButtonText: Story = {
  args: {
    list: ["Detail 1", "Detail 2", "Detail 3"],
    text: "Learn more",
  },
  render: args => (
    <div className="max-w-md w-full">
      <SeeMore {...args} />
    </div>
  ),
};

// Long list
export const LongList: Story = {
  args: {
    list: [
      "Feature one with detailed description",
      "Feature two",
      "Feature three",
      "Feature four",
      "Feature five",
      "Feature six",
      "Feature seven",
      "Feature eight",
      "Feature nine",
      "Feature ten",
    ],
    text: "See all features",
  },
  render: args => (
    <div className="max-w-md w-full">
      <SeeMore {...args} />
    </div>
  ),
};

// Single item
export const SingleItem: Story = {
  args: {
    list: ["Single checklist item"],
    text: "See details",
  },
  render: args => (
    <div className="max-w-md w-full">
      <SeeMore {...args} />
    </div>
  ),
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-8">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Default</h3>
        <SeeMore list={["Item 1", "Item 2", "Item 3"]} />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Custom Button Text</h3>
        <SeeMore
          list={["Feature 1", "Feature 2", "Feature 3"]}
          text="View all features"
        />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Long List</h3>
        <SeeMore
          list={[
            "Feature one",
            "Feature two",
            "Feature three",
            "Feature four",
            "Feature five",
          ]}
          text="See all details"
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all SeeMore variants and configurations.",
      },
    },
  },
};