import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
import { Accordion } from "./index";
import type { AccordionProps } from "./types";

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

/* ------------
   ArgTypes
--------------- */

const argTypes: ArgTypes<AccordionProps> = {
  title: {
    control: { type: "text" as const },
    description: "Title displayed above the accordion",
  },
  items: {
    control: { type: "object" as const },
    description: "Accordion items",
  },
  background: {
    control: { type: "select" as const },
    options: ["blue", "green", "yellow", "purple", "white", "navy", "cream500"],
    description: "Background color of the accordion",
  },
  enableHeading: {
    control: { type: "boolean" as const },
  },
  maxWidth: {
    control: { type: "boolean" as const },
  },
  hashAutoExpand: {
    control: { type: "boolean" as const },
  },
  descriptionMaxWidth: {
    control: { type: "text" as const },
  },
  anchorId: {
    control: { type: "text" as const },
  },
  initialExpandedItems: {
    control: { type: "object" as const },
  },
  itemContainerClassName: {
    table: { disable: true },
  },
};

/* --------
   Meta
----------- */

const meta: Meta<typeof Accordion> = {
  title: "Contentful Blocks/Accordion",
  component: Accordion,
  tags: ["autodocs"],
  argTypes,
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "Contentful accordion block used to render collapsible content.",
      },
    },
  },
  args: {
    title: "FAQs",
    background: "white",
    enableHeading: false,
    maxWidth: true,
    items: [],
    initialExpandedItems: [],
    hashAutoExpand: false,
    descriptionMaxWidth: "max-w-[980px]",
  },
};

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

/* --------
   Stories
----------- */

export const Default: Story = {
  args: {
    items: FAQ_ITEMS,
  },
};

export const WithRichTextContent = {
  args: {
    title: "FAQs - Rich Content",
    items: RICH_FAQ_ITEMS,
  },
};