import type { Meta, StoryObj } from "@storybook/react";
import type { AccordionProps } from "..";
import { Accordion, Button, Segment, SegmentGroup } from "..";
import { excludeControls } from "../../utils";

type StoryType = StoryObj<typeof Accordion>;

const meta: Meta<typeof Accordion> = {
  title: "Components/Accordion",
  component: Accordion,
  argTypes: excludeControls("headerChildren"),
  decorators: [
    Story => (
      <div style={{ minHeight: 150 }}>
        <Story />
      </div>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: AccordionProps) => (
    <Accordion {...args}>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
        repellendus deleniti architecto
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
        repellendus deleniti architecto
      </p>
    </Accordion>
  ),
  args: {
    linkElementType: "h2",
    showText: "See more",
    hideText: "See less",
    headerPosition: "top",
    startOpen: false,
  },
};

export const StartExpanded: StoryType = {
  render: (args: AccordionProps) => (
    <Accordion {...args}>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
        repellendus deleniti architecto
      </p>
    </Accordion>
  ),
  args: {
    showText: "How to sign a Premium Credit Agreement (PCL)",
    hideText: "How to sign a Premium Credit Agreement (PCL)",
    headerPosition: "top",
    startOpen: true,
  },
};

export const BottomHeader: StoryType = {
  render: (args: AccordionProps) => (
    <Accordion {...args}>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
        repellendus deleniti architecto
      </p>
    </Accordion>
  ),
  args: {
    showText: "See more",
    hideText: "See less",
    headerPosition: "bottom",
    startOpen: false,
  },
};

export const WithChildren: StoryType = {
  render: (args: AccordionProps) => (
    <Accordion {...args}>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
        repellendus deleniti architecto
      </p>
    </Accordion>
  ),
  args: {
    showText: "See more",
    hideText: "See less",
    headerPosition: "top",
    headerChildren: <Button>Go</Button>,
    startOpen: false,
  },
};

export const ComplexContent: StoryType = {
  render: (args: AccordionProps) => (
    <Accordion {...args}>
      <SegmentGroup>
        <Segment>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
          repellendus deleniti architecto
        </Segment>
        <Segment>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
          repellendus deleniti architecto
        </Segment>
      </SegmentGroup>
    </Accordion>
  ),
  args: {
    showText: "See more",
    hideText: "See less",
    headerPosition: "top",
    startOpen: false,
  },
};

export default meta;
