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

const meta = {
  title: "base/communication/Link",
  component: Link,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The link text content",
    },
    href: {
      control: "text",
      description: "The URL the link points to",
    },
    size: {
      control: "select",
      options: linkPropDefs.size.values,
      description: "The size of the link",
    },
    color: {
      control: "select",
      options: linkPropDefs.color.values,
      description: "The color theme of the link",
    },

    highContrast: {
      control: "boolean",
      description: "Whether to use high contrast colors",
    },
    underline: {
      control: "select",
      options: linkPropDefs.underline.values,
      description: "The underline style of the link",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "Click here",
    href: "#",
  },
} satisfies Meta<typeof Link>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default link.
 */
export const Default: Story = {}

/**
 * Link with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Link href="#" size="1">
        Small link
      </Link>
      <Link href="#" size="2">
        Medium link
      </Link>
      <Link href="#" size="3">
        Large link
      </Link>
    </div>
  ),
}

/**
 * Link with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Link href="#" color="gray">
        Gray link
      </Link>
      <Link href="#" color="blue">
        Blue link
      </Link>
      <Link href="#" color="green">
        Green link
      </Link>
      <Link href="#" color="red">
        Red link
      </Link>
      <Link href="#" color="yellow">
        Yellow link
      </Link>
      <Link href="#" color="purple">
        Purple link
      </Link>
    </div>
  ),
}

/**
 * Link with different underline styles.
 */
export const UnderlineStyles: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Link href="#" underline="auto">
        Auto underline
      </Link>
      <Link href="#" underline="hover">
        Hover underline
      </Link>
      <Link href="#" underline="always">
        Always underline
      </Link>
      <Link href="#" underline="none">
        No underline
      </Link>
    </div>
  ),
}

/**
 * Link with high contrast.
 */
export const HighContrast: Story = {
  args: {
    highContrast: true,
    children: "High contrast link",
  },
}

/**
 * External link example.
 */
export const ExternalLink: Story = {
  args: {
    children: "Visit our website",
    href: "https://example.com",
  },
}

/**
 * Link in context.
 */
export const InContext: Story = {
  render: () => (
    <p>
      This is a paragraph with a <Link href="#">link</Link> embedded within the text to show how it
      looks in context.
    </p>
  ),
}