import { InfoCircledIcon, StarIcon } from "@radix-ui/react-icons"
import { textFieldRootPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { IconButton } from "../../action/icon-button"
import { TextField } from "./TextField"

const meta = {
  title: "base/form/TextField",
  component: TextField.Root,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: { type: "select" },
      options: textFieldRootPropDefs.size.values,
      defaultValue: "2",
    },
    variant: {
      control: { type: "select" },
      options: textFieldRootPropDefs.variant.values,
      defaultValue: "surface",
    },
    color: {
      control: { type: "select" },
      options: textFieldRootPropDefs.color.values,
    },
    radius: {
      control: { type: "select" },
      options: textFieldRootPropDefs.radius.values,
    },
    disabled: {
      control: "boolean",
    },
    readOnly: {
      control: "boolean",
    },
  },
} satisfies Meta<typeof TextField.Root>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default text field.
 */
export const Default: Story = {
  render: args => <TextField.Root {...args} placeholder="Enter text..." />,
}

/**
 * Text field with leading and trailing slots.
 */
export const WithSlots: Story = {
  render: args => (
    <TextField.Root {...args} placeholder="Search...">
      <TextField.Slot>
        <InfoCircledIcon />
      </TextField.Slot>
      <TextField.Slot>
        <IconButton size="1" variant="ghost" color="gray">
          <StarIcon />
        </IconButton>
      </TextField.Slot>
    </TextField.Root>
  ),
}

/**
 * Different sizes of text fields.
 */
export const Sizes: Story = {
  render: args => (
    <div className="flex flex-col space-y-4">
      {textFieldRootPropDefs.size.values.map(size => (
        <TextField.Root {...args} key={size} size={size} placeholder={`Size ${size}`} />
      ))}
    </div>
  ),
}

/**
 * Text field with different visual variants.
 */
export const Variants: Story = {
  render: args => (
    <div className="flex flex-col space-y-4">
      {textFieldRootPropDefs.variant.values.map(variant => (
        <TextField.Root
          {...args}
          key={variant}
          variant={variant}
          placeholder={`${variant} variant`}
        />
      ))}
    </div>
  ),
}

/**
 * Text field with different colors.
 */
export const Colors: Story = {
  render: args => (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-4 gap-4">
        {textFieldRootPropDefs.color.values.map(color => (
          <TextField.Root {...args} key={color} color={color} placeholder={`${color} color`} />
        ))}
      </div>
      <div className="grid grid-cols-4 gap-4">
        {textFieldRootPropDefs.color.values.map(color => (
          <TextField.Root
            variant="classic"
            {...args}
            key={color}
            color={color}
            placeholder={`${color} color`}
          />
        ))}
      </div>
      <div className="grid grid-cols-4 gap-4">
        {textFieldRootPropDefs.color.values.map(color => (
          <TextField.Root
            variant="soft"
            {...args}
            key={color}
            color={color}
            placeholder={`${color} color`}
          />
        ))}
      </div>
    </div>
  ),
}

/**
 * Text field with different corner radii.
 */
export const Radius: Story = {
  render: args => (
    <div className="flex flex-col space-y-4">
      {textFieldRootPropDefs.radius.values.map(radius => (
        <TextField.Root {...args} key={radius} radius={radius} placeholder={`${radius} radius`} />
      ))}
    </div>
  ),
}

/**
 * Text field with different input types.
 */
export const Types: Story = {
  render: args => {
    const types = [
      "text",
      "password",
      "email",
      "number",
      "search",
      "hidden",
      "tel",
      "url",
      "date",
      "time",
      "datetime-local",
      "month",
      "week",
    ] as const
    return (
      <div className="grid grid-cols-3 gap-4">
        {types.map(type => (
          <TextField.Root {...args} key={type} type={type} placeholder={`Type: ${type}`} />
        ))}
      </div>
    )
  },
}

/**
 * Disabled text field.
 */
export const Disabled: Story = {
  render: args => (
    <div className="flex flex-col space-y-4">
      <TextField.Root {...args} placeholder="Disabled" disabled />
      <TextField.Root
        {...args}
        placeholder="Disabled with value"
        defaultValue="some value"
        disabled
      />
      <TextField.Root {...args} placeholder="Disabled with slot" disabled>
        <TextField.Slot>
          <InfoCircledIcon />
        </TextField.Slot>
      </TextField.Root>
    </div>
  ),
}

/**
 * Read-only text field.
 */
export const ReadOnly: Story = {
  render: args => (
    <div className="flex flex-col space-y-4">
      <TextField.Root {...args} placeholder="Read-only" readOnly />
      <TextField.Root
        {...args}
        placeholder="Read-only with value"
        defaultValue="some value"
        readOnly
      />
      <TextField.Root {...args} placeholder="Read-only with slot" readOnly>
        <TextField.Slot>
          <InfoCircledIcon />
        </TextField.Slot>
      </TextField.Root>
    </div>
  ),
}