import { SegmentedControl } from "@radix-ui/themes"
import { segmentedControlRootPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"

const meta: Meta<typeof SegmentedControl.Root> = {
  title: "base/components/SegmentedControl",
  component: SegmentedControl.Root,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: "select",
      options: segmentedControlRootPropDefs.size.values,
    },
    variant: {
      control: "select",
      options: ["surface", "classic"],
    },
    radius: {
      control: "select",
      options: segmentedControlRootPropDefs.radius.values,
    },
    disabled: {
      control: "boolean",
    },
  },
  args: {
    size: "2",
    variant: "surface",
  },
} satisfies Meta<typeof SegmentedControl.Root>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: args => (
    <SegmentedControl.Root defaultValue="item1" {...args}>
      <SegmentedControl.Item value="item1">Item 1</SegmentedControl.Item>
      <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
      <SegmentedControl.Item value="item3">Item 3</SegmentedControl.Item>
      <SegmentedControl.Item value="item4">Item 4</SegmentedControl.Item>
      <SegmentedControl.Item value="item5">Item 5</SegmentedControl.Item>
    </SegmentedControl.Root>
  ),
}

export const Variants: Story = {
  render: args => (
    <div className="flex flex-col gap-4">
      <SegmentedControl.Root {...args} variant="surface" defaultValue="item1">
        <SegmentedControl.Item value="item1">Surface</SegmentedControl.Item>
        <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
      </SegmentedControl.Root>
      <SegmentedControl.Root {...args} variant="classic" defaultValue="item1">
        <SegmentedControl.Item value="item1">Classic</SegmentedControl.Item>
        <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
      </SegmentedControl.Root>
    </div>
  ),
}

export const Sizes: Story = {
  render: args => (
    <div className="flex flex-col gap-4">
      {segmentedControlRootPropDefs.size.values.map(size => (
        <SegmentedControl.Root {...args} key={size} size={size} defaultValue="item1">
          <SegmentedControl.Item value="item1">{`Size ${size}`}</SegmentedControl.Item>
          <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
        </SegmentedControl.Root>
      ))}
    </div>
  ),
}

export const Radius: Story = {
  render: args => (
    <div className="flex flex-col gap-4">
      {segmentedControlRootPropDefs.radius.values.map(radius => (
        <SegmentedControl.Root {...args} key={radius} radius={radius} defaultValue="item1">
          <SegmentedControl.Item value="item1">{`Radius ${radius}`}</SegmentedControl.Item>
          <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
        </SegmentedControl.Root>
      ))}
    </div>
  ),
}

export const Disabled: Story = {
  render: args => (
    <SegmentedControl.Root {...args} disabled defaultValue="item1">
      <SegmentedControl.Item value="item1">Item 1</SegmentedControl.Item>
      <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
    </SegmentedControl.Root>
  ),
}

export const NoDefaultValue: Story = {
  render: args => (
    <SegmentedControl.Root {...args}>
      <SegmentedControl.Item value="item1">Item 1</SegmentedControl.Item>
      <SegmentedControl.Item value="item2">Item 2</SegmentedControl.Item>
    </SegmentedControl.Root>
  ),
}