import type { Meta, StoryObj } from "@storybook/react";
import type { AccordionListProps } from "./AccordionList";
import { AccordionList } from "./AccordionList";

type StoryType = StoryObj<typeof AccordionList>;

const meta: Meta<typeof AccordionList> = {
  title: "Components/AccordionList",
  component: AccordionList,
};

export default meta;

const sampleContent = [
  {
    id: "coverage",
    header: "What is covered?",
    details:
      "Your policy covers damage to your business property, liability claims, and business interruption. This includes protection for your building, contents, stock, and equipment against risks like fire, theft, and accidental damage.",
  },
  {
    id: "claims",
    header: "How do I make a claim?",
    details:
      "To make a claim, contact us immediately by phone or through your online account. Have your policy number ready, along with details and evidence of the incident. We'll guide you through the process and assign a claims handler to assist you.",
  },
  {
    id: "adjust-coverage",
    header: "Can I adjust my coverage?",
    details:
      "Yes, you can adjust your coverage at any time. Contact your account manager or use your online portal to request changes. Keep in mind that changes to coverage may affect your premium, and some modifications may require underwriting approval.",
  },
];

export const Default: StoryType = {
  render: (args: AccordionListProps) => <AccordionList {...args} />,
  args: {
    content: sampleContent,
  },
};

export const WithCallbacks: StoryType = {
  render: (args: AccordionListProps) => <AccordionList {...args} />,
  args: {
    content: sampleContent,
    onOpen: (id: string) => console.log(`Opened accordion with id: ${id}`),
    onClose: (id: string) => console.log(`Closed accordion with id: ${id}`),
  },
};

export const TwoItems: StoryType = {
  render: (args: AccordionListProps) => <AccordionList {...args} />,
  args: {
    content: [
      {
        id: "business-liability",
        header: "Business Liability",
        details:
          "Protection against third-party claims for injury or property damage that occurs in connection with your business operations.",
      },
      {
        id: "professional-indemnity",
        header: "Professional Indemnity",
        details:
          "Coverage for claims arising from professional advice or services you provide, including errors, omissions, or negligence.",
      },
    ],
  },
};

export const ManyItems: StoryType = {
  render: (args: AccordionListProps) => <AccordionList {...args} />,
  args: {
    content: [
      {
        id: "property-insurance",
        header: "Property Insurance",
        details: "Covers damage to buildings, contents, and stock.",
      },
      {
        id: "liability-insurance",
        header: "Liability Insurance",
        details: "Protects against third-party injury and damage claims.",
      },
      {
        id: "business-interruption",
        header: "Business Interruption",
        details:
          "Covers loss of income if your business has to close temporarily.",
      },
      {
        id: "professional-indemnity-2",
        header: "Professional Indemnity",
        details: "Protection for claims related to professional services.",
      },
      {
        id: "cyber-insurance",
        header: "Cyber Insurance",
        details: "Coverage for data breaches and cyber attacks.",
      },
    ],
  },
};

export const WithReactNodeContent: StoryType = {
  render: (args: AccordionListProps) => <AccordionList {...args} />,
  args: {
    content: [
      {
        id: "important-info",
        header: <strong>Important Information</strong>,
        details: (
          <div>
            <p>
              This is a paragraph with <em>formatted</em> text.
            </p>
            <ul>
              <li>Point one</li>
              <li>Point two</li>
              <li>Point three</li>
            </ul>
          </div>
        ),
      },
      {
        id: "standard-text",
        header: "Standard Text Header",
        details: "Standard text details",
      },
    ],
  },
};

export const AllowMultiple: StoryType = {
  render: (args: AccordionListProps) => <AccordionList {...args} />,
  args: {
    content: sampleContent,
    allowMultiple: true,
  },
};
