import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { Bold, Italic, Underline } from "@lucide/vue"
import { Toggle } from "."
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "UI/Toggle",
  component: Toggle,
  tags: ["autodocs"],
  parameters: componentDoc("Toggle"),
  argTypes: {
    variant: {
      control: "select",
      options: ["default", "outline"],
      description: "Visual style.",
    },
    size: {
      control: "select",
      options: ["sm", "default", "lg"],
      description: "Toggle size.",
    },
    disabled: { control: "boolean" },
    pressed: { control: "boolean" },
  },
  args: { variant: "default", size: "default" },
} satisfies Meta<typeof Toggle>

export default meta
type Story = StoryObj<typeof meta>

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

export const Variants: Story = {
  name: "Variants",
  render: () => ({
    components: { Toggle, Bold },
    template: `
      <div class="flex items-center gap-3">
        <Toggle variant="default" aria-label="Default"><Bold /></Toggle>
        <Toggle variant="outline" aria-label="Outline"><Bold /></Toggle>
      </div>
    `,
  }),
}

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

export const WithIcon: Story = {
  name: "With Icon",
  render: () => ({
    components: { Toggle, Bold, Italic, Underline },
    template: `
      <div class="flex items-center gap-1 rounded-md border p-1">
        <Toggle aria-label="Toggle bold"><Bold /></Toggle>
        <Toggle aria-label="Toggle italic"><Italic /></Toggle>
        <Toggle aria-label="Toggle underline"><Underline /></Toggle>
      </div>
    `,
  }),
}

export const Disabled: Story = {
  name: "Disabled",
  render: () => ({
    components: { Toggle, Bold },
    template: `
      <div class="flex items-center gap-3">
        <Toggle disabled aria-label="Disabled default"><Bold /> Off</Toggle>
        <Toggle disabled :default-pressed="true" aria-label="Disabled on"><Bold /> On</Toggle>
        <Toggle variant="outline" disabled aria-label="Disabled outline"><Bold /></Toggle>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Toggle, Bold, Italic, Underline },
    template: `
      <div class="space-y-6">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Variants</h3>
          <div class="flex items-center gap-3">
            <Toggle aria-label="Default"><Bold /> Default</Toggle>
            <Toggle variant="outline" aria-label="Outline"><Bold /> Outline</Toggle>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Sizes</h3>
          <div class="flex items-center gap-3">
            <Toggle size="sm" aria-label="Small"><Bold /></Toggle>
            <Toggle size="default" aria-label="Default"><Bold /></Toggle>
            <Toggle size="lg" aria-label="Large"><Bold /></Toggle>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Text formatting toolbar</h3>
          <div class="flex items-center gap-1 rounded-md border p-1 w-fit">
            <Toggle aria-label="Bold"><Bold /></Toggle>
            <Toggle aria-label="Italic"><Italic /></Toggle>
            <Toggle aria-label="Underline"><Underline /></Toggle>
          </div>
        </section>
      </div>
    `,
  }),
}
