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

const meta = {
  title: "base/communication/Code",
  component: Code,
  tags: ["autodocs"],
  argTypes: {
    children: {
      control: "text",
      description: "The code content to display",
    },
    size: {
      control: "select",
      options: codePropDefs.size.values,
      description: "The size of the code",
    },
    color: {
      control: "select",
      options: codePropDefs.color.values,
      description: "The color theme of the code",
    },
    variant: {
      control: "select",
      options: codePropDefs.variant.values,
      description: "The visual style of the code",
    },
    highContrast: {
      control: "boolean",
      description: "Whether to use high contrast colors",
    },
  },
  parameters: {
    layout: "centered",
  },
  args: {
    children: "console.log('Hello, World!')",
  },
} satisfies Meta<typeof Code>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Default code with soft variant.
 */
export const Default: Story = {}

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

/**
 * Code with different variants.
 */
export const Variants: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Code variant="soft">Soft variant code</Code>
      <Code variant="outline">Outline variant code</Code>
      <Code variant="solid">Solid variant code</Code>
    </div>
  ),
}

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

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

/**
 * Code with JavaScript syntax.
 */
export const JavaScriptCode: Story = {
  args: {
    children: "function greet(name) { return `Hello, ${name}!`; }",
  },
}

/**
 * Code with HTML syntax.
 */
export const HTMLCode: Story = {
  args: {
    children: "<div className='container'>Hello World</div>",
  },
}

/**
 * Code with CSS syntax.
 */
export const CSSCode: Story = {
  args: {
    children: ".container { display: flex; justify-content: center; }",
  },
}