import { headingPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { Heading } from "./Heading"

const meta = {
  title: "base/typography/Heading",
  component: Heading,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The content of the heading",
    },
    size: {
      control: "select",
      options: headingPropDefs.size.values,
      description: "The size of the heading",
    },
    color: {
      control: "select",
      options: headingPropDefs.color.values,
      description: "The color theme of the heading",
    },
    weight: {
      control: "select",
      options: headingPropDefs.weight.values,
      description: "The font weight of the heading",
    },
    align: {
      control: "select",
      options: headingPropDefs.align.values,
      description: "The text alignment",
    },
    trim: {
      control: "select",
      options: headingPropDefs.trim.values,
      description: "The text trimming behavior",
    },
    truncate: {
      control: "boolean",
      description: "Whether to truncate the text",
    },
    highContrast: {
      control: "boolean",
      description: "Whether to use high contrast colors",
    },
    as: {
      control: "select",
      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
      description: "The HTML heading element to render",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "This is a sample heading",
  },
} satisfies Meta<typeof Heading>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default heading with standard styling.
 */
export const Default: Story = {}

/**
 * Heading with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading size="1">Size 1 - Small heading</Heading>
      <Heading size="2">Size 2 - Default heading</Heading>
      <Heading size="3">Size 3 - Large heading</Heading>
      <Heading size="4">Size 4 - Extra large heading</Heading>
      <Heading size="5">Size 5 - Huge heading</Heading>
      <Heading size="6">Size 6 - Massive heading</Heading>
      <Heading size="7">Size 7 - Gigantic heading</Heading>
      <Heading size="8">Size 8 - Colossal heading</Heading>
      <Heading size="9">Size 9 - Titanic heading</Heading>
    </div>
  ),
}

/**
 * Heading with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading color="gray">Gray heading</Heading>
      <Heading color="gold">Gold heading</Heading>
      <Heading color="bronze">Bronze heading</Heading>
      <Heading color="brown">Brown heading</Heading>
      <Heading color="yellow">Yellow heading</Heading>
      <Heading color="amber">Amber heading</Heading>
      <Heading color="orange">Orange heading</Heading>
      <Heading color="tomato">Tomato heading</Heading>
      <Heading color="red">Red heading</Heading>
      <Heading color="ruby">Ruby heading</Heading>
      <Heading color="crimson">Crimson heading</Heading>
      <Heading color="pink">Pink heading</Heading>
      <Heading color="plum">Plum heading</Heading>
      <Heading color="purple">Purple heading</Heading>
      <Heading color="violet">Violet heading</Heading>
      <Heading color="iris">Iris heading</Heading>
      <Heading color="indigo">Indigo heading</Heading>
      <Heading color="blue">Blue heading</Heading>
      <Heading color="cyan">Cyan heading</Heading>
      <Heading color="teal">Teal heading</Heading>
      <Heading color="jade">Jade heading</Heading>
      <Heading color="green">Green heading</Heading>
      <Heading color="grass">Grass heading</Heading>
      <Heading color="lime">Lime heading</Heading>
      <Heading color="mint">Mint heading</Heading>
      <Heading color="sky">Sky heading</Heading>
    </div>
  ),
}

/**
 * Heading with different weights.
 */
export const Weights: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading weight="light">Light weight heading</Heading>
      <Heading weight="regular">Regular weight heading</Heading>
      <Heading weight="medium">Medium weight heading</Heading>
      <Heading weight="bold">Bold weight heading</Heading>
    </div>
  ),
}

/**
 * Heading with different alignments.
 */
export const Alignments: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading align="left">Left aligned heading</Heading>
      <Heading align="center">Center aligned heading</Heading>
      <Heading align="right">Right aligned heading</Heading>
    </div>
  ),
}

/**
 * Heading with different HTML elements.
 */
export const Elements: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading as="h1">H1 heading</Heading>
      <Heading as="h2">H2 heading</Heading>
      <Heading as="h3">H3 heading</Heading>
      <Heading as="h4">H4 heading</Heading>
      <Heading as="h5">H5 heading</Heading>
      <Heading as="h6">H6 heading</Heading>
    </div>
  ),
}

/**
 * Heading with high contrast.
 */
export const HighContrast: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading>Normal contrast heading</Heading>
      <Heading highContrast>High contrast heading</Heading>
    </div>
  ),
}

/**
 * Truncated heading example.
 */
export const Truncated: Story = {
  render: () => (
    <div className="w-64">
      <Heading truncate>
        This is a very long heading that will be truncated when it exceeds the container width
      </Heading>
    </div>
  ),
}

/**
 * Heading with different trim options.
 */
export const Trim: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Heading trim="normal">Normal trim heading</Heading>
      <Heading trim="start">Start trimmed heading</Heading>
      <Heading trim="end">End trimmed heading</Heading>
      <Heading trim="both">Both trimmed heading</Heading>
    </div>
  ),
}