import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Mail, Search } from "@lucide/vue"
import { Input } from "."
import { Label } from "../label"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Input",
  component: Input,
  tags: ["autodocs"],
  parameters: componentDoc("Input"),
  argTypes: {
    modelValue: { control: "text", description: "Bound value." },
    defaultValue: { control: "text", description: "Initial uncontrolled value." },
    class: { control: "text", description: "Extra Tailwind classes." },
  },
  args: { modelValue: "" },
} satisfies Meta<typeof Input>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Input },
    setup() {
      return { args }
    },
    template: '<Input v-bind="args" placeholder="Type something..." />',
  }),
}

export const Types: Story = {
  name: "Input Types",
  render: () => ({
    components: { Input },
    template: `
      <div class="grid max-w-sm gap-3">
        <Input type="text" placeholder="text" />
        <Input type="email" placeholder="email@example.com" />
        <Input type="password" placeholder="password" />
        <Input type="number" placeholder="0" />
        <Input type="tel" placeholder="+1 555 555 5555" />
        <Input type="url" placeholder="https://example.com" />
        <Input type="search" placeholder="search..." />
      </div>
    `,
  }),
}

export const States: Story = {
  name: "States",
  render: () => ({
    components: { Input },
    template: `
      <div class="grid max-w-sm gap-3">
        <Input placeholder="default" />
        <Input placeholder="disabled" disabled />
        <Input placeholder="readonly" readonly model-value="cannot edit" />
        <Input placeholder="error" class="border-destructive ring-destructive" />
      </div>
    `,
  }),
}

export const WithLabel: Story = {
  name: "With Label",
  render: () => ({
    components: { Input, Label },
    template: `
      <div class="grid w-full max-w-sm items-center gap-1.5">
        <Label for="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
      </div>
    `,
  }),
}

export const WithIconPrefix: Story = {
  name: "With Icon (Prefix)",
  render: () => ({
    components: { Input, Search },
    template: `
      <div class="relative w-full max-w-sm">
        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input class="pl-9" placeholder="Search..." />
      </div>
    `,
  }),
}

export const WithIconSuffix: Story = {
  name: "With Icon (Suffix)",
  render: () => ({
    components: { Input, Mail },
    template: `
      <div class="relative w-full max-w-sm">
        <Input class="pr-9" type="email" placeholder="you@example.com" />
        <Mail class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
      </div>
    `,
  }),
}

export const File: Story = {
  name: "File Input",
  render: () => ({
    components: { Input, Label },
    template: `
      <div class="grid w-full max-w-sm items-center gap-1.5">
        <Label for="picture">Picture</Label>
        <Input id="picture" type="file" />
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Input, Label, Search, Mail },
    template: `
      <div class="grid max-w-md gap-6">
        <section class="grid gap-1.5">
          <Label for="sc-default">Default</Label>
          <Input id="sc-default" placeholder="Type here..." />
        </section>
        <section class="grid gap-1.5">
          <Label for="sc-disabled">Disabled</Label>
          <Input id="sc-disabled" placeholder="No edits" disabled />
        </section>
        <section class="grid gap-1.5">
          <Label for="sc-error">Error</Label>
          <Input id="sc-error" placeholder="Invalid" class="border-destructive ring-destructive" />
        </section>
        <section class="grid gap-1.5">
          <Label for="sc-search">Search</Label>
          <div class="relative">
            <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input id="sc-search" class="pl-9" placeholder="Search..." />
          </div>
        </section>
      </div>
    `,
  }),
}
