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

/**
 * The Checkbox component allows users to select one or more options from a set.
 */
const meta: Meta<typeof Checkbox> = {
  title: "base/form/Checkbox",
  component: Checkbox,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: "select",
      options: checkboxPropDefs.size.values,
    },
    color: {
      control: "select",
      options: checkboxPropDefs.color.values,
    },
    highContrast: {
      control: "boolean",
    },
    disabled: {
      control: "boolean",
    },
  },
} satisfies Meta<typeof Checkbox>

export default meta

type Story = StoryObj<typeof Checkbox>

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

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

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

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

/**
 * Checkbox group with multiple options and labels.
 */
export const WithLabels: Story = {
  render: args => (
    <div>
      <div className="text-sm font-medium">Select your interests:</div>
      <div className="flex flex-col gap-2">
        <div className="flex items-center gap-2">
          <Checkbox {...args} defaultChecked id="tech" />
          <label htmlFor="tech">Technology</label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox {...args} id="design" />
          <label htmlFor="design">Design</label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox {...args} defaultChecked id="prog" />
          <label htmlFor="prog">Programming</label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox {...args} id="biz" />
          <label htmlFor="biz">Business</label>
        </div>
      </div>
    </div>
  ),
}