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

const meta = {
  title: "Elements/OptionSelect/SelectMultipleOption",
  component: SelectMultipleOption,
  tags: ["autodocs"],
  args: {
    label: "Tags",
    placeholder: "Select multiple…",
    options: [
      { label: "Apple", value: "apple" },
      { label: "Banana", value: "banana" },
      { label: "Cherry", value: "cherry" },
    ],
  },
  parameters: componentDoc("SelectMultipleOption", { barrel: "option-select" }),
} satisfies Meta<typeof SelectMultipleOption>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Pick multiple" },
}

export const Preselected: Story = {
  args: { label: "Preselected", modelValue: ["apple", "banana"] },
}

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

export const Disabled: Story = {
  args: {
    label: "Disabled",
    disabled: true,
    modelValue: ["apple"],
  },
}

export const WithHelpText: Story = {
  args: {
    label: "Tags",
    helpText: "Pick the ones you like.",
  },
}

export const WithErrors: Story = {
  args: {
    label: "Tags",
    errors: ["Choose at least one."],
  },
}
