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

const meta = {
  title: "UI/Slider",
  component: Slider,
  tags: ["autodocs"],
  parameters: componentDoc("Slider"),
  argTypes: {
    size: {
      control: "select",
      options: ["sm", "default", "lg"],
      description: "Visual size.",
    },
    orientation: {
      control: "select",
      options: ["horizontal", "vertical"],
      description: "Layout direction.",
    },
    disabled: { control: "boolean" },
    min: { control: "number" },
    max: { control: "number" },
    step: { control: "number" },
  },
  args: { size: "default", orientation: "horizontal", min: 0, max: 100, step: 1 },
} satisfies Meta<typeof Slider>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Slider },
    setup() {
      const value = ref([50])
      return { args, value }
    },
    template: `
      <div class="w-80 space-y-2">
        <Slider v-bind="args" v-model="value" />
        <div class="text-xs text-muted-foreground">Value: {{ value }}</div>
      </div>
    `,
  }),
}

export const Range: Story = {
  name: "Range (two thumbs)",
  render: () => ({
    components: { Slider },
    setup() {
      const value = ref([25, 75])
      return { value }
    },
    template: `
      <div class="w-80 space-y-2">
        <Slider v-model="value" />
        <div class="text-xs text-muted-foreground">Range: {{ value }}</div>
      </div>
    `,
  }),
}

export const Steps: Story = {
  name: "Steps",
  render: () => ({
    components: { Slider },
    setup() {
      const value = ref([40])
      return { value }
    },
    template: `
      <div class="w-80 space-y-2">
        <Slider v-model="value" :step="10" :min="0" :max="100" />
        <div class="text-xs text-muted-foreground">Step 10 — {{ value }}</div>
      </div>
    `,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { Slider },
    setup() {
      const value = ref([60])
      return { value }
    },
    template: `
      <div class="w-80">
        <Slider v-model="value" disabled />
      </div>
    `,
  }),
}

export const Vertical: Story = {
  render: () => ({
    components: { Slider },
    setup() {
      const value = ref([40])
      return { value }
    },
    template: `
      <div class="flex h-48 items-start gap-6">
        <Slider v-model="value" orientation="vertical" />
        <div class="text-xs text-muted-foreground">{{ value }}</div>
      </div>
    `,
  }),
}

export const Sizes: Story = {
  render: () => ({
    components: { Slider },
    setup() {
      const a = ref([30])
      const b = ref([50])
      const c = ref([70])
      return { a, b, c }
    },
    template: `
      <div class="w-80 space-y-6">
        <Slider v-model="a" size="sm" />
        <Slider v-model="b" size="default" />
        <Slider v-model="c" size="lg" />
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Slider },
    setup() {
      const single = ref([50])
      const range = ref([20, 80])
      const stepped = ref([60])
      return { single, range, stepped }
    },
    template: `
      <div class="space-y-8 w-96">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Single value</h3>
          <Slider v-model="single" />
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Range (two thumbs)</h3>
          <Slider v-model="range" />
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Stepped (10)</h3>
          <Slider v-model="stepped" :step="10" />
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Disabled</h3>
          <Slider :model-value="[40]" disabled />
        </section>
      </div>
    `,
  }),
}
