import { Select } from "@radix-ui/themes"
import {
  selectContentPropDefs,
  selectRootPropDefs,
  selectTriggerPropDefs,
} from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"

const meta: Meta<typeof Select.Root> = {
  title: "base/selection/Select",
  component: Select.Root,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
}

export default meta

type Story = StoryObj<typeof meta>

type DefaultStory = StoryObj<
  React.ComponentProps<typeof Select.Root> &
    React.ComponentProps<typeof Select.Trigger> &
    React.ComponentProps<typeof Select.Content>
>

export const Default: DefaultStory = {
  argTypes: {
    size: {
      control: "select",
      options: selectRootPropDefs.size.values,
    },
    variant: {
      control: "select",
      options: selectContentPropDefs.variant.values,
    },
    color: {
      control: "select",
      options: selectContentPropDefs.color.values,
    },
    radius: {
      control: "select",
      options: selectTriggerPropDefs.radius.values,
    },
  },
  render: args => (
    <Select.Root size={args.size}>
      <Select.Trigger
        placeholder="Select option..."
        variant={args.variant}
        color={args.color}
        radius={args.radius}
      />
      <Select.Content color={args.color}>
        <Select.Group>
          <Select.Label>Fruits</Select.Label>
          <Select.Item value="apple">Apple</Select.Item>
          <Select.Item value="banana">Banana</Select.Item>
          <Select.Item value="orange">Orange</Select.Item>
        </Select.Group>
        <Select.Separator />
        <Select.Group>
          <Select.Label>Vegetables</Select.Label>
          <Select.Item value="carrot">Carrot</Select.Item>
          <Select.Item value="potato">Potato</Select.Item>
        </Select.Group>
      </Select.Content>
    </Select.Root>
  ),
}

export const Sizes: Story = {
  render: args => (
    <div className="flex items-center gap-4">
      <Select.Root {...(args as any)} size="1">
        <Select.Trigger placeholder="Select..." />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
          <Select.Item value="option2">Option 2</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)} size="2">
        <Select.Trigger placeholder="Select..." />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
          <Select.Item value="option2">Option 2</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)} size="3">
        <Select.Trigger placeholder="Select..." />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
          <Select.Item value="option2">Option 2</Select.Item>
        </Select.Content>
      </Select.Root>
    </div>
  ),
}

export const Variants: Story = {
  render: args => (
    <div className="flex items-center gap-4">
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Classic" variant="classic" />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Surface" variant="surface" />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Soft" variant="soft" />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Ghost" variant="ghost" />
        <Select.Content>
          <Select.Item value="option1">Option 1</Select.Item>
        </Select.Content>
      </Select.Root>
    </div>
  ),
}

export const Colors: Story = {
  render: args => (
    <div className="flex items-center gap-4">
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Default" />
        <Select.Content>
          <Select.Item value="1">One</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Red" color="red" />
        <Select.Content color="red">
          <Select.Item value="1">One</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Green" color="green" />
        <Select.Content color="green">
          <Select.Item value="1">One</Select.Item>
        </Select.Content>
      </Select.Root>
    </div>
  ),
}

export const Radius: Story = {
  render: args => (
    <div className="flex items-center gap-4">
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="None" radius="none" />
        <Select.Content>
          <Select.Item value="1">One</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Large" radius="large" />
        <Select.Content>
          <Select.Item value="1">One</Select.Item>
        </Select.Content>
      </Select.Root>
      <Select.Root {...(args as any)}>
        <Select.Trigger placeholder="Full" radius="full" />
        <Select.Content>
          <Select.Item value="1">One</Select.Item>
        </Select.Content>
      </Select.Root>
    </div>
  ),
}