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

const meta = {
  title: "base/form/TextArea",
  component: TextArea,
  tags: ["autodocs"],
  argTypes: {
    placeholder: {
      control: "text",
      description: "Placeholder text for the textarea",
    },
    disabled: {
      control: "boolean",
      description: "Whether the textarea is disabled",
    },
    readOnly: {
      control: "boolean",
      description: "Whether the textarea is read-only",
    },
    required: {
      control: "boolean",
      description: "Whether the textarea is required",
    },
    size: {
      control: "select",
      options: textAreaPropDefs.size.values,
      description: "Size of the textarea",
    },
    color: {
      control: "select",
      options: textAreaPropDefs.color.values,
      description: "Color theme of the textarea",
    },
    variant: {
      control: "select",
      options: textAreaPropDefs.variant.values,
      description: "Visual style variant",
    },
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof TextArea>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic textarea with placeholder.
 */
export const Default: Story = {
  args: {
    placeholder: "Enter your message here...",
  },
}

/**
 * Different sizes of textarea.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <label htmlFor="small-textarea" className="block text-sm font-medium mb-2">
          Small (Size 1)
        </label>
        <TextArea id="small-textarea" size="1" placeholder="Small textarea..." />
      </div>
      <div>
        <label htmlFor="medium-textarea" className="block text-sm font-medium mb-2">
          Medium (Size 2)
        </label>
        <TextArea id="medium-textarea" size="2" placeholder="Medium textarea..." />
      </div>
      <div>
        <label htmlFor="large-textarea" className="block text-sm font-medium mb-2">
          Large (Size 3)
        </label>
        <TextArea id="large-textarea" size="3" placeholder="Large textarea..." />
      </div>
    </div>
  ),
}

/**
 * Different variants of textarea.
 */
export const Variants: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <label htmlFor="surface-textarea" className="block text-sm font-medium mb-2">
          Surface
        </label>
        <TextArea id="surface-textarea" variant="surface" placeholder="Surface variant..." />
      </div>
      <div>
        <label htmlFor="classic-textarea" className="block text-sm font-medium mb-2">
          Classic
        </label>
        <TextArea id="classic-textarea" variant="classic" placeholder="Classic variant..." />
      </div>
      <div>
        <label htmlFor="soft-textarea" className="block text-sm font-medium mb-2">
          Soft
        </label>
        <TextArea id="soft-textarea" variant="soft" placeholder="Soft variant..." />
      </div>
    </div>
  ),
}

/**
 * Different colors of textarea.
 */
export const Colors: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <label htmlFor="blue-textarea" className="block text-sm font-medium mb-2">
          Blue
        </label>
        <TextArea id="blue-textarea" color="blue" placeholder="Blue textarea..." />
      </div>
      <div>
        <label htmlFor="green-textarea" className="block text-sm font-medium mb-2">
          Green
        </label>
        <TextArea id="green-textarea" color="green" placeholder="Green textarea..." />
      </div>
      <div>
        <label htmlFor="red-textarea" className="block text-sm font-medium mb-2">
          Red
        </label>
        <TextArea id="red-textarea" color="red" placeholder="Red textarea..." />
      </div>
      <div>
        <label htmlFor="purple-textarea" className="block text-sm font-medium mb-2">
          Purple
        </label>
        <TextArea id="purple-textarea" color="purple" placeholder="Purple textarea..." />
      </div>
    </div>
  ),
}

/**
 * Disabled and read-only states.
 */
export const States: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <label htmlFor="disabled-textarea" className="block text-sm font-medium mb-2">
          Disabled
        </label>
        <TextArea id="disabled-textarea" disabled placeholder="This textarea is disabled" />
      </div>
      <div>
        <label htmlFor="readonly-textarea" className="block text-sm font-medium mb-2">
          Read Only
        </label>
        <TextArea
          id="readonly-textarea"
          readOnly
          placeholder="This textarea is read-only"
          defaultValue="This content cannot be edited"
        />
      </div>
      <div>
        <label htmlFor="required-textarea" className="block text-sm font-medium mb-2">
          Required
        </label>
        <TextArea id="required-textarea" required placeholder="This field is required" />
      </div>
    </div>
  ),
}

/**
 * Textarea with form context.
 */
export const WithForm: Story = {
  render: () => (
    <form className="space-y-4">
      <div>
        <label htmlFor="name" className="block text-sm font-medium mb-2">
          Name
        </label>
        <input
          type="text"
          id="name"
          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="Enter your name"
        />
      </div>
      <div>
        <label htmlFor="message" className="block text-sm font-medium mb-2">
          Message
        </label>
        <TextArea id="message" placeholder="Enter your message..." rows={4} required />
      </div>
      <button
        type="submit"
        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
      >
        Submit
      </button>
    </form>
  ),
}

/**
 * Textarea with character count.
 */
export const WithCharacterCount: Story = {
  render: () => {
    const maxLength = 500
    return (
      <div className="space-y-2">
        <TextArea
          placeholder="Enter your message (max 500 characters)..."
          maxLength={maxLength}
          rows={4}
        />
        <div className="text-sm text-gray-500 text-right">
          <span id="char-count">0</span> / {maxLength} characters
        </div>
      </div>
    )
  },
}

/**
 * Textarea with validation states.
 */
export const ValidationStates: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <label htmlFor="valid-textarea" className="block text-sm font-medium mb-2 text-green-600">
          Valid
        </label>
        <TextArea
          id="valid-textarea"
          color="green"
          placeholder="Valid input..."
          defaultValue="This is valid content"
        />
      </div>
      <div>
        <label htmlFor="invalid-textarea" className="block text-sm font-medium mb-2 text-red-600">
          Invalid
        </label>
        <TextArea
          id="invalid-textarea"
          color="red"
          placeholder="Invalid input..."
          defaultValue="This input has an error"
        />
      </div>
      <div>
        <label
          htmlFor="warning-textarea"
          className="block text-sm font-medium mb-2 text-yellow-600"
        >
          Warning
        </label>
        <TextArea
          id="warning-textarea"
          color="yellow"
          placeholder="Warning input..."
          defaultValue="This input has a warning"
        />
      </div>
    </div>
  ),
}