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

/**
 * The Radio component allows users to select one option from a set of choices.
 * It should always be used within a group with other radio buttons.
 */
const meta: Meta<typeof Radio> = {
  title: "base/selection/Radio",
  component: Radio,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: "select",
      options: radioPropDefs.size.values,
    },
    color: {
      control: "select",
      options: radioPropDefs.color.values,
    },
    highContrast: {
      control: "boolean",
    },
    disabled: {
      control: "boolean",
    },
  },
} satisfies Meta<typeof Radio>

export default meta

type Story = StoryObj<typeof Radio>

/**
 * Default radio button.
 */
export const Default: Story = {
  args: {
    defaultChecked: true,
  },
}

/**
 * Radio buttons can have different states.
 */
export const States: Story = {
  render: args => (
    <div className="flex items-center gap-2">
      <div className="flex items-center gap-2">
        <Radio {...args} checked={false} name="state" id="unchecked" />
        <label className="ml-2" htmlFor="unchecked">
          Unchecked
        </label>
      </div>
      <div className="flex items-center gap-2">
        <Radio {...args} checked name="state" id="checked" />
        <label className="ml-2" htmlFor="checked">
          Checked
        </label>
      </div>
    </div>
  ),
}

/**
 * Radio buttons can be disabled.
 */
export const Disabled: Story = {
  render: args => (
    <div className="flex items-center gap-2">
      <Radio {...args} disabled checked={false} name="disabled" />
      <Radio {...args} disabled checked name="disabled" />
    </div>
  ),
}

/**
 * Different sizes of radio buttons.
 */
export const Sizes: Story = {
  render: args => (
    <div className="flex items-center gap-2">
      <div className="flex items-center gap-2">
        <Radio {...args} size="1" name="size" id="size-1" />
        <label htmlFor="size-1">Size 1</label>
      </div>
      <div className="flex items-center gap-2">
        <Radio {...args} size="2" name="size" id="size-2" />
        <label htmlFor="size-2">Size 2</label>
      </div>
      <div className="flex items-center gap-2">
        <Radio {...args} size="3" name="size" id="size-3" />
        <label htmlFor="size-3">Size 3</label>
      </div>
    </div>
  ),
}

/**
 * Radio buttons can have different colors.
 */
export const Colors: Story = {
  render: args => (
    <div className="grid grid-cols-4 gap-4">
      {radioPropDefs.color.values.map(color => (
        <div key={color} className="flex items-center gap-2">
          <Radio {...args} color={color} defaultChecked name={color} id={color} />
          <label className="capitalize" htmlFor={color}>
            {color}
          </label>
        </div>
      ))}
    </div>
  ),
}

/**
 * Radio button group with labels.
 */
export const WithLabels: Story = {
  render: args => (
    <div className="space-y-3">
      <div className="text-sm font-medium">Choose your plan:</div>
      <div className="flex flex-col space-y-2">
        <div className="flex items-center gap-2">
          <Radio {...args} name="plan" value="basic" defaultChecked id="basic" />
          <label htmlFor="basic">Basic - Free</label>
        </div>
        <div className="flex items-center gap-2">
          <Radio {...args} name="plan" value="pro" id="pro" />
          <label htmlFor="pro">Pro - $10/month</label>
        </div>
        <div className="flex items-center gap-2">
          <Radio {...args} name="plan" value="enterprise" id="enterprise" />
          <label htmlFor="enterprise">Enterprise - $50/month</label>
        </div>
      </div>
    </div>
  ),
}