import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { ref } from "vue"
import { Textarea } from "."
import { Label } from "../label"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Textarea",
  component: Textarea,
  tags: ["autodocs"],
  parameters: componentDoc("Textarea"),
  argTypes: {
    modelValue: { control: "text" },
    defaultValue: { control: "text" },
    rows: { control: { type: "number", min: 1, max: 30 } },
    class: { control: "text" },
  },
  args: { rows: 3 },
} satisfies Meta<typeof Textarea>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Textarea },
    setup() {
      return { args }
    },
    template: '<Textarea v-bind="args" placeholder="Tell us about yourself..." />',
  }),
}

export const Rows: Story = {
  name: "Rows",
  render: () => ({
    components: { Textarea },
    template: `
      <div class="grid max-w-md gap-4">
        <Textarea :rows="2" placeholder="2 rows" />
        <Textarea :rows="5" placeholder="5 rows" />
        <Textarea :rows="10" placeholder="10 rows" />
      </div>
    `,
  }),
}

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

export const WithLabel: Story = {
  name: "With Label",
  render: () => ({
    components: { Textarea, Label },
    template: `
      <div class="grid w-full max-w-md items-center gap-1.5">
        <Label for="bio">Bio</Label>
        <Textarea id="bio" placeholder="Write a short bio" />
      </div>
    `,
  }),
}

export const AutoSize: Story = {
  name: "Auto Size (rows binding)",
  render: () => ({
    components: { Textarea },
    setup() {
      const value = ref("")
      const rows = ref(3)
      const onInput = (event: Event) => {
        const t = event.target as HTMLTextAreaElement
        const lines = (t.value.match(/\n/g)?.length ?? 0) + 1
        rows.value = Math.max(3, Math.min(15, lines))
      }
      return { value, rows, onInput }
    },
    template: `
      <div class="grid max-w-md gap-2">
        <Textarea v-model="value" :rows="rows" @input="onInput" placeholder="Press enter to grow..." />
        <p class="text-xs text-muted-foreground">rows: {{ rows }}</p>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Textarea, Label },
    template: `
      <div class="grid max-w-md gap-6">
        <div class="grid gap-1.5">
          <Label for="sc-default">Default</Label>
          <Textarea id="sc-default" placeholder="Default..." />
        </div>
        <div class="grid gap-1.5">
          <Label for="sc-disabled">Disabled</Label>
          <Textarea id="sc-disabled" placeholder="Disabled" disabled />
        </div>
        <div class="grid gap-1.5">
          <Label for="sc-error">Error</Label>
          <Textarea id="sc-error" placeholder="Invalid" class="border-destructive ring-destructive" />
        </div>
      </div>
    `,
  }),
}
