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

const meta = {
  title: "Elements/Input/RangeSliderInput",
  component: RangeSliderInput,
  tags: ["autodocs"],
  args: {
    label: "Volume",
    min: 0,
    max: 100,
    step: 1,
  },
  parameters: componentDoc("RangeSliderInput", { barrel: "input" }),
} satisfies Meta<typeof RangeSliderInput>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Volume", modelValue: 30 },
}

export const FullRange: Story = {
  args: { label: "Brightness", min: 0, max: 255, step: 5, modelValue: 128 },
}

export const Required: Story = {
  args: { label: "Volume", required: true, modelValue: 50 },
}

export const Disabled: Story = {
  args: { label: "Volume", disabled: true, modelValue: 50 },
}

export const WithHelpText: Story = {
  args: {
    label: "Quality",
    helpText: "Slide to set output quality.",
    modelValue: 75,
  },
}

export const WithErrors: Story = {
  args: {
    label: "Volume",
    errors: ["Value out of range."],
    modelValue: 110,
  },
}
