import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Label } from "."
import { Input } from "../input"
import { Checkbox } from "../checkbox"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Label",
  component: Label,
  tags: ["autodocs"],
  parameters: componentDoc("Label"),
  argTypes: {
    required: { control: "boolean", description: "Append a required asterisk." },
    for: { control: "text", description: "Associated control id." },
    class: { control: "text" },
  },
  args: { required: false },
} satisfies Meta<typeof Label>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Label },
    setup() {
      return { args }
    },
    template: '<Label v-bind="args">Email address</Label>',
  }),
}

export const Required: Story = {
  name: "Required",
  render: () => ({
    components: { Label },
    template: '<Label required>Email address</Label>',
  }),
}

export const WithInput: Story = {
  name: "With Input",
  render: () => ({
    components: { Label, Input },
    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 WithCheckbox: Story = {
  name: "With Checkbox",
  render: () => ({
    components: { Label, Checkbox },
    template: `
      <div class="flex items-center gap-2">
        <Checkbox id="terms" />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Label, Input },
    template: `
      <div class="grid max-w-sm gap-6">
        <div class="grid gap-1.5">
          <Label for="sc-name">Name</Label>
          <Input id="sc-name" />
        </div>
        <div class="grid gap-1.5">
          <Label for="sc-email" required>Email</Label>
          <Input id="sc-email" type="email" />
        </div>
        <div class="grid gap-1.5">
          <Label for="sc-disabled" class="opacity-60">Disabled field</Label>
          <Input id="sc-disabled" disabled />
        </div>
      </div>
    `,
  }),
}
