import type { Meta, StoryObj } from "@storybook/react"
import { SvgUse } from "../../shared/SvgUse"
import { Input, InputAdornment, InputAdornmentButton, InputControl, InputRoot } from "./Input"

/**
 * The Input component is a customizable input container that provides structure
 * for creating form inputs with consistent styling.
 */
const meta = {
  title: "base/form/Input",
  component: InputRoot,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    className: "w-full md:w-80",
  },
} satisfies Meta<typeof Input>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default implementation of the Input component with a basic text input.
 */
export const Default: Story = {
  render: args => (
    <InputRoot {...args}>
      <InputControl>
        <Input placeholder="Enter text..." />
      </InputControl>
    </InputRoot>
  ),
}

/**
 * Input with a leading icon adornment to enhance visual context.
 */
export const WithLeadingIcon: Story = {
  render: args => (
    <InputRoot {...args}>
      <InputAdornment>
        <SvgUse icon="search" />
      </InputAdornment>
      <InputControl>
        <Input placeholder="Search..." />
      </InputControl>
    </InputRoot>
  ),
}

/**
 * Input with a trailing icon adornment, useful for actions like clear.
 */
export const WithTrailingIcon: Story = {
  render: args => (
    <InputRoot {...args}>
      <InputControl>
        <Input placeholder="Enter email..." />
      </InputControl>
      <InputAdornment>
        <SvgUse icon="mail" />
      </InputAdornment>
    </InputRoot>
  ),
}

/**
 * Input with both leading and trailing adornments for enhanced functionality.
 */
export const WithBothAdornments: Story = {
  render: args => (
    <InputRoot {...args}>
      <InputAdornment>
        <SvgUse icon="user" />
      </InputAdornment>
      <InputControl>
        <Input placeholder="Username..." />
      </InputControl>
      <InputAdornment>
        <SvgUse icon="check" />
      </InputAdornment>
    </InputRoot>
  ),
}

/**
 * Input with a clickable adornment button for additional actions.
 */
export const WithAdornmentButton: Story = {
  render: args => (
    <InputRoot {...args}>
      <InputControl>
        <Input placeholder="Enter text..." />
      </InputControl>
      <InputAdornment>
        <InputAdornmentButton type="button">
          <SvgUse icon="x" />
        </InputAdornmentButton>
      </InputAdornment>
    </InputRoot>
  ),
}

/**
 * Disabled state of the Input component.
 */
export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: args => (
    <InputRoot {...args}>
      <InputControl>
        <Input placeholder="Disabled input" />
      </InputControl>
    </InputRoot>
  ),
}

/**
 * Input with pre-filled value.
 */
export const WithValue: Story = {
  render: args => (
    <InputRoot {...args}>
      <InputControl>
        <Input value="Pre-filled value" onChange={() => {}} />
      </InputControl>
    </InputRoot>
  ),
}

/**
 * Input with validation styles for error state.
 */
export const WithError: Story = {
  render: args => (
    <div className="space-y-2">
      <InputRoot {...args} error className={args.className}>
        <InputControl>
          <Input placeholder="Invalid input" />
        </InputControl>
        <InputAdornment>
          <SvgUse icon="alert-circle" className="text-red-500" />
        </InputAdornment>
      </InputRoot>
      <p className="text-sm text-red-500">Please enter a valid value</p>
    </div>
  ),
}

/**
 * Input with different sizes for various use cases.
 */
export const Sizes: Story = {
  render: args => (
    <div className="space-y-4">
      <div className="space-y-2">
        <div className="text-sm font-medium">Small</div>
        <InputRoot {...args} size="sm">
          <InputControl>
            <Input placeholder="Small input" />
          </InputControl>
        </InputRoot>
      </div>

      <div className="space-y-2">
        <div className="text-sm font-medium">Medium (Default)</div>
        <InputRoot {...args} size="md">
          <InputControl>
            <Input placeholder="Medium input" />
          </InputControl>
        </InputRoot>
      </div>

      <div className="space-y-2">
        <div className="text-sm font-medium">Large</div>
        <InputRoot {...args} size="lg">
          <InputControl>
            <Input placeholder="Large input" />
          </InputControl>
        </InputRoot>
      </div>
    </div>
  ),
}