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

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

export default meta
type Story = StoryObj<typeof meta>

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

export const Sizes: Story = {
  name: "Sizes",
  render: () => ({
    components: { Switch },
    template: `
      <div class="flex items-center gap-6">
        <Switch size="sm" aria-label="Small" />
        <Switch size="default" aria-label="Default" />
        <Switch size="lg" aria-label="Large" />
      </div>
    `,
  }),
}

export const Checked: Story = {
  name: "Checked",
  render: () => ({
    components: { Switch },
    template: `
      <div class="flex items-center gap-6">
        <Switch size="sm" :default-value="true" aria-label="Small checked" />
        <Switch size="default" :default-value="true" aria-label="Default checked" />
        <Switch size="lg" :default-value="true" aria-label="Large checked" />
      </div>
    `,
  }),
}

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

export const WithLabel: Story = {
  name: "With Label",
  render: () => ({
    components: { Switch, Label },
    template: `
      <div class="flex items-center gap-2">
        <Switch id="airplane" />
        <Label for="airplane">Airplane mode</Label>
      </div>
    `,
  }),
}

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

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Switch, Label },
    template: `
      <div class="grid max-w-sm gap-6">
        <section class="grid gap-3">
          <h3 class="text-sm font-semibold opacity-70">Sizes</h3>
          <div class="flex items-center gap-6">
            <Switch size="sm" aria-label="sm" />
            <Switch size="default" aria-label="default" />
            <Switch size="lg" aria-label="lg" />
          </div>
        </section>
        <section class="grid gap-2">
          <h3 class="text-sm font-semibold opacity-70">Notification settings</h3>
          <div class="flex items-center justify-between">
            <Label for="n-email">Email alerts</Label>
            <Switch id="n-email" :default-value="true" />
          </div>
          <div class="flex items-center justify-between">
            <Label for="n-push">Push notifications</Label>
            <Switch id="n-push" />
          </div>
          <div class="flex items-center justify-between">
            <Label for="n-sms" class="opacity-60">SMS (coming soon)</Label>
            <Switch id="n-sms" disabled />
          </div>
        </section>
      </div>
    `,
  }),
}
