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

const meta = {
  title: "UI/Checkbox",
  component: Checkbox,
  tags: ["autodocs"],
  parameters: componentDoc("Checkbox"),
  argTypes: {
    disabled: { control: "boolean" },
    class: { control: "text" },
  },
  args: { disabled: false },
} satisfies Meta<typeof Checkbox>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Checkbox },
    setup() {
      return { args }
    },
    template: '<Checkbox v-bind="args" aria-label="Default checkbox" />',
  }),
}

export const Checked: Story = {
  name: "Checked",
  render: () => ({
    components: { Checkbox },
    template: '<Checkbox :default-value="true" aria-label="Checked" />',
  }),
}

export const Indeterminate: Story = {
  name: "Indeterminate",
  render: () => ({
    components: { Checkbox },
    template: '<Checkbox default-value="indeterminate" aria-label="Indeterminate" />',
  }),
}

export const Disabled: Story = {
  name: "Disabled",
  render: () => ({
    components: { Checkbox },
    template: `
      <div class="flex items-center gap-3">
        <Checkbox disabled aria-label="Disabled unchecked" />
        <Checkbox disabled :default-value="true" aria-label="Disabled checked" />
      </div>
    `,
  }),
}

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

export const Controlled: Story = {
  name: "Controlled (v-model)",
  render: () => ({
    components: { Checkbox, Label },
    setup() {
      const checked = ref(false)
      return { checked }
    },
    template: `
      <div class="grid gap-3">
        <div class="flex items-center gap-2">
          <Checkbox id="ctrl" v-model="checked" />
          <Label for="ctrl">Bound checkbox</Label>
        </div>
        <p class="text-xs text-muted-foreground">value: {{ checked }}</p>
      </div>
    `,
  }),
}

export const States: Story = {
  name: "All States",
  render: () => ({
    components: { Checkbox, Label },
    template: `
      <div class="grid gap-3">
        <div class="flex items-center gap-2">
          <Checkbox id="s-unchecked" />
          <Label for="s-unchecked">Unchecked</Label>
        </div>
        <div class="flex items-center gap-2">
          <Checkbox id="s-checked" :default-value="true" />
          <Label for="s-checked">Checked</Label>
        </div>
        <div class="flex items-center gap-2">
          <Checkbox id="s-ind" default-value="indeterminate" />
          <Label for="s-ind">Indeterminate</Label>
        </div>
        <div class="flex items-center gap-2">
          <Checkbox id="s-dis" disabled />
          <Label for="s-dis" class="opacity-60">Disabled</Label>
        </div>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Checkbox, Label },
    template: `
      <div class="grid max-w-sm gap-4">
        <h3 class="text-sm font-semibold opacity-70">Notification settings</h3>
        <div class="flex items-start gap-2">
          <Checkbox id="sc-email" :default-value="true" />
          <div class="grid gap-0.5">
            <Label for="sc-email">Email</Label>
            <p class="text-xs text-muted-foreground">Receive product updates by email.</p>
          </div>
        </div>
        <div class="flex items-start gap-2">
          <Checkbox id="sc-push" />
          <div class="grid gap-0.5">
            <Label for="sc-push">Push</Label>
            <p class="text-xs text-muted-foreground">Receive browser push notifications.</p>
          </div>
        </div>
        <div class="flex items-start gap-2">
          <Checkbox id="sc-sms" disabled />
          <div class="grid gap-0.5">
            <Label for="sc-sms" class="opacity-60">SMS (coming soon)</Label>
            <p class="text-xs text-muted-foreground">Get text alerts.</p>
          </div>
        </div>
      </div>
    `,
  }),
}
