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

const meta: Meta<typeof Switch> = {
  title: "base/form/Switch",
  component: Switch,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: "select",
      options: switchPropDefs.size.values,
    },
    variant: {
      control: "select",
      options: switchPropDefs.variant.values,
    },
    color: {
      control: "select",
      options: switchPropDefs.color.values,
    },
    highContrast: {
      control: "boolean",
    },
    radius: {
      control: "select",
      options: switchPropDefs.radius.values,
    },
    disabled: {
      control: "boolean",
    },
  },
} satisfies Meta<typeof Switch>

export default meta

type Story = StoryObj<typeof Switch>

/**
 * Default switch component.
 */
export const Default: Story = {
  render: args => <Switch {...args} />,
}

/**
 * Disabled switch component.
 */
export const Disabled: Story = {
  render: args => <Switch {...args} disabled />,
}

/**
 * Different sizes of switches.
 */
export const Sizes: Story = {
  render: args => (
    <div className="flex flex-col gap-2">
      {switchPropDefs.size.values.map(size => (
        <div key={size} className="flex items-center gap-2">
          <Switch {...args} size={size} id={`size-${size}`} />
          <label htmlFor={`size-${size}`}>{`Size ${size}`}</label>
        </div>
      ))}
    </div>
  ),
}

/**
 * Different variants of switches.
 */
export const Variants: Story = {
  render: args => (
    <div className="flex flex-col gap-2">
      {switchPropDefs.variant.values.map(variant => (
        <div key={variant} className="flex items-center gap-2">
          <Switch {...args} variant={variant} id={`variant-${variant}`} />
          <label className="capitalize" htmlFor={`variant-${variant}`}>
            {variant}
          </label>
        </div>
      ))}
    </div>
  ),
}