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

const meta = {
  title: "UI/Progress",
  component: Progress,
  tags: ["autodocs"],
  parameters: componentDoc("Progress"),
  argTypes: {
    value: { control: { type: "range", min: 0, max: 100, step: 1 } },
    variant: {
      control: "select",
      options: ["default", "success", "destructive"],
    },
    size: {
      control: "select",
      options: ["sm", "default", "lg"],
    },
  },
  args: { value: 60, variant: "default", size: "default" },
} satisfies Meta<typeof Progress>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Progress },
    setup() {
      return { args }
    },
    template: '<div class="w-80"><Progress v-bind="args" /></div>',
  }),
}

export const Variants: Story = {
  name: "Variants",
  render: () => ({
    components: { Progress },
    template: `
      <div class="space-y-4 w-80">
        <Progress :value="60" variant="default" />
        <Progress :value="60" variant="success" />
        <Progress :value="60" variant="destructive" />
      </div>
    `,
  }),
}

export const Sizes: Story = {
  name: "Sizes",
  render: () => ({
    components: { Progress },
    template: `
      <div class="space-y-4 w-80">
        <Progress :value="60" size="sm" />
        <Progress :value="60" size="default" />
        <Progress :value="60" size="lg" />
      </div>
    `,
  }),
}

export const Indeterminate: Story = {
  name: "Indeterminate",
  render: () => ({
    components: { Progress },
    template: '<div class="w-80"><Progress :value="null" /></div>',
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Progress },
    template: `
      <div class="space-y-6 w-96">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Values</h3>
          <div class="space-y-3">
            <Progress :value="0" />
            <Progress :value="25" />
            <Progress :value="50" />
            <Progress :value="75" />
            <Progress :value="100" />
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Variants</h3>
          <div class="space-y-3">
            <Progress :value="60" variant="default" />
            <Progress :value="60" variant="success" />
            <Progress :value="60" variant="destructive" />
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Indeterminate</h3>
          <Progress :value="null" />
        </section>
      </div>
    `,
  }),
}
