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

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { RadioGroup, RadioGroupItem, Label },
    setup() {
      return { args }
    },
    template: `
      <RadioGroup v-bind="args">
        <div class="flex items-center gap-2">
          <RadioGroupItem id="r-apple" value="apple" />
          <Label for="r-apple">Apple</Label>
        </div>
        <div class="flex items-center gap-2">
          <RadioGroupItem id="r-banana" value="banana" />
          <Label for="r-banana">Banana</Label>
        </div>
        <div class="flex items-center gap-2">
          <RadioGroupItem id="r-cherry" value="cherry" />
          <Label for="r-cherry">Cherry</Label>
        </div>
      </RadioGroup>
    `,
  }),
}

export const Inline: Story = {
  name: "Inline",
  render: () => ({
    components: { RadioGroup, RadioGroupItem, Label },
    template: `
      <RadioGroup default-value="small" class="flex flex-row gap-6">
        <div class="flex items-center gap-2">
          <RadioGroupItem id="s" value="small" />
          <Label for="s">Small</Label>
        </div>
        <div class="flex items-center gap-2">
          <RadioGroupItem id="m" value="medium" />
          <Label for="m">Medium</Label>
        </div>
        <div class="flex items-center gap-2">
          <RadioGroupItem id="l" value="large" />
          <Label for="l">Large</Label>
        </div>
      </RadioGroup>
    `,
  }),
}

export const Disabled: Story = {
  name: "Disabled",
  render: () => ({
    components: { RadioGroup, RadioGroupItem, Label },
    template: `
      <div class="grid gap-6">
        <RadioGroup default-value="a" disabled>
          <div class="flex items-center gap-2">
            <RadioGroupItem id="d-a" value="a" />
            <Label for="d-a">Disabled group A</Label>
          </div>
          <div class="flex items-center gap-2">
            <RadioGroupItem id="d-b" value="b" />
            <Label for="d-b">Disabled group B</Label>
          </div>
        </RadioGroup>
        <RadioGroup default-value="x">
          <div class="flex items-center gap-2">
            <RadioGroupItem id="i-x" value="x" />
            <Label for="i-x">Enabled X</Label>
          </div>
          <div class="flex items-center gap-2">
            <RadioGroupItem id="i-y" value="y" disabled />
            <Label for="i-y" class="opacity-60">Disabled Y</Label>
          </div>
        </RadioGroup>
      </div>
    `,
  }),
}

export const Controlled: Story = {
  name: "Controlled (v-model)",
  render: () => ({
    components: { RadioGroup, RadioGroupItem, Label },
    setup() {
      const value = ref("monthly")
      return { value }
    },
    template: `
      <div class="grid gap-3">
        <RadioGroup v-model="value">
          <div class="flex items-center gap-2">
            <RadioGroupItem id="p-monthly" value="monthly" />
            <Label for="p-monthly">Monthly</Label>
          </div>
          <div class="flex items-center gap-2">
            <RadioGroupItem id="p-yearly" value="yearly" />
            <Label for="p-yearly">Yearly</Label>
          </div>
        </RadioGroup>
        <p class="text-xs text-muted-foreground">selected: {{ value }}</p>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { RadioGroup, RadioGroupItem, Label },
    template: `
      <div class="grid max-w-md gap-6">
        <section class="grid gap-2">
          <h3 class="text-sm font-semibold opacity-70">Notify me about</h3>
          <RadioGroup default-value="all">
            <div class="flex items-center gap-2">
              <RadioGroupItem id="sc-all" value="all" />
              <Label for="sc-all">All new messages</Label>
            </div>
            <div class="flex items-center gap-2">
              <RadioGroupItem id="sc-mentions" value="mentions" />
              <Label for="sc-mentions">Direct messages and mentions</Label>
            </div>
            <div class="flex items-center gap-2">
              <RadioGroupItem id="sc-nothing" value="nothing" />
              <Label for="sc-nothing">Nothing</Label>
            </div>
          </RadioGroup>
        </section>
      </div>
    `,
  }),
}
