import type { Meta, StoryObj } from "@storybook/react";
import { excludeControls } from "../../utils";
import { Box } from "../Box";
import type { TextOrHTMLProps } from "./TextOrHTML";
import { TextOrHTML } from "./TextOrHTML";

type StoryType = StoryObj<typeof TextOrHTML>;

const meta: Meta<typeof TextOrHTML> = {
  title: "Components/TextOrHTML",
  component: TextOrHTML,
  argTypes: {
    ...excludeControls("style"),
    text: {
      control: "text",
      description: "HTML string to be rendered with dangerouslySetInnerHTML",
    },
    htmlClassName: {
      control: "text",
      description: "Custom class name for the dangerous HTML element",
    },
    htmlElementType: {
      control: "select",
      options: ["span", "div"],
      description: "HTML element type for the dangerous HTML element",
    },
    textWrapper: {
      control: "boolean",
      description:
        "If true, wraps the dangerous HTML element inside a Text component. When true, all other props (variant, spacing, className, etc.) are applied to the Text wrapper.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "TextOrHTML component that renders HTML content. The `text`, `htmlClassName`, and `htmlElementType` props are used for the inner HTML element. When `textWrapper=true`, all other props are passed to the wrapping Text component. When `textWrapper=false` (default), only the HTML element is rendered.",
      },
    },
  },
};

export const BasicHTML: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      text="<p>This is <strong>bold</strong> and this is <em>italic</em></p>"
    />
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story: "Basic example rendering HTML content in a span element.",
      },
    },
  },
};

export const CustomHTMLElement: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      text="<span>Content rendered in a div element</span>"
    />
  ),
  args: {
    htmlElementType: "div",
  },
  parameters: {
    docs: {
      description: {
        story: "Example using a div element instead of the default span.",
      },
    },
  },
};

export const WithTextWrapperAndVariant: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      text="<span>Heading with <strong>bold text</strong></span>"
      variant="h1"
      textWrapper
    />
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          "When `textWrapper=true`, the component renders the HTML inside a Text component, allowing Text props like `variant` to be applied to the wrapper. The HTML element remains a span/div with the content.",
      },
    },
  },
};

export const WithTextWrapperAndSpacing: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <Box>
      <TextOrHTML
        {...args}
        spacing="tight"
        text="<span>This paragraph has tight spacing. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>"
        textWrapper
      />
      <TextOrHTML
        spacing="tight"
        text="<span>Another paragraph with tight spacing. Morbi vel lorem enim.</span>"
        textWrapper
      />
    </Box>
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          "Using `textWrapper=true` to apply spacing prop to the Text wrapper component.",
      },
    },
  },
};

export const WithTextWrapperAndClassName: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      className="custom-class"
      text="<span>Text with custom className applied to wrapper</span>"
      textWrapper
    />
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          "When `textWrapper=true`, the `className` prop is applied to the Text wrapper. Use `htmlClassName` to add classes to the inner HTML element.",
      },
    },
  },
};

export const WithHTMLClassNameOnly: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      htmlClassName="custom-html-class"
      text="<span>Text with custom htmlClassName</span>"
    />
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          "Using `htmlClassName` to add classes specifically to the inner HTML element.",
      },
    },
  },
};

export const ComplexHTML: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      text="<div><h3>Section Title</h3><p>This is a paragraph with <strong>bold</strong>, <em>italic</em>, and <a href='#'>link</a> elements.</p><ul><li>List item 1</li><li>List item 2</li></ul></div>"
    />
  ),
  args: {
    htmlElementType: "div",
  },
  parameters: {
    docs: {
      description: {
        story:
          "Example with complex HTML structure using a div element to contain multiple child elements.",
      },
    },
  },
};

export const WithTextWrapperAndCustomStyles: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      text="<span>Text with custom inline styles</span>"
      variant="h2"
      spacing="loose"
      textWrapper
      style={{
        color: "var(--color-primary)",
        fontSize: "1.5rem",
      }}
    />
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          "Using `textWrapper=true` with multiple Text props (variant, spacing, style). The style is applied to the Text wrapper.",
      },
    },
  },
};

export const DirectHTMLOnly: StoryType = {
  render: (args: TextOrHTMLProps) => (
    <TextOrHTML
      {...args}
      text="<p>This is a paragraph with <a href='#'>a link</a> and <strong>bold text</strong></p>"
      htmlClassName="my-html-class"
    />
  ),
  args: {},
  parameters: {
    docs: {
      description: {
        story:
          "Default behavior with `textWrapper=false`. Only the HTML element is rendered with the specified `htmlElementType` and `htmlClassName`. No Text props are applied.",
      },
    },
  },
};

export default meta;
