import type { Meta, StoryObj } from "@storybook/vue3-vite"
import TextInput from "./TextInput.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Input/TextInput",
  component: TextInput,
  tags: ["autodocs"],
  args: {
    label: "Field label",
    placeholder: "Type something...",
  },
  parameters: componentDoc("TextInput", { barrel: "input" }),
} satisfies Meta<typeof TextInput>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Field label" },
}

export const WithPlaceholder: Story = {
  args: { label: "Email", placeholder: "you@example.com" },
}

export const Required: Story = {
  args: { label: "Required field", required: true },
}

export const Disabled: Story = {
  args: { label: "Disabled", disabled: true, modelValue: "read-only value" },
}

export const Readonly: Story = {
  args: { label: "Readonly", readonly: true, modelValue: "cannot edit" },
}

export const WithHelpText: Story = {
  args: {
    label: "Username",
    helpText: "Lowercase letters, numbers, and underscores only.",
  },
}

export const WithErrors: Story = {
  args: {
    label: "Password",
    errors: ["Must be at least 8 characters.", "Must include a number."],
  },
}

export const HiddenLabel: Story = {
  args: { label: "Search", hideLabel: true, placeholder: "Search..." },
}

export const WithDefaultValue: Story = {
  args: { label: "First name", modelValue: "Stephen" },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { TextInput },
    template: `
      <div class="flex flex-col gap-4 max-w-md">
        <TextInput label="Default" />
        <TextInput label="Required" required />
        <TextInput label="With help text" help-text="Some helpful hint" />
        <TextInput
          label="With errors"
          required
          :errors="['Field is required.', 'Try again.']"
        />
        <TextInput label="Disabled" disabled model-value="value" />
        <TextInput label="Readonly" readonly model-value="value" />
      </div>
    `,
  }),
}
