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

const meta = {
  title: "base/typography/Text",
  component: Text,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The content of the text",
    },
    size: {
      control: "select",
      options: textPropDefs.size.values,
      description: "The size of the text",
    },
    color: {
      control: "select",
      options: textPropDefs.color.values,
      description: "The color theme of the text",
    },
    weight: {
      control: "select",
      options: textPropDefs.weight.values,
      description: "The font weight of the text",
    },
    align: {
      control: "select",
      options: textPropDefs.align.values,
      description: "The text alignment",
    },
    trim: {
      control: "select",
      options: textPropDefs.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: ["span", "div", "label", "p"],
      description: "The HTML element to render",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "This is a sample text component",
  },
} satisfies Meta<typeof Text>

export default meta

type Story = StoryObj<typeof meta>

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

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

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

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

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

/**
 * Text with different HTML elements.
 */
export const Elements: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Text as="span">Span element</Text>
      <Text as="div">Div element</Text>
      <Text as="label">Label element</Text>
      <Text as="p">Paragraph element</Text>
    </div>
  ),
}

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

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

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