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

const meta = {
  title: "Elements/OptionSelect/ListOption",
  component: ListOption,
  tags: ["autodocs"],
  args: {
    label: "Status",
    options: [
      { label: "Open", value: "open" },
      { label: "In progress", value: "in_progress" },
      { label: "Closed", value: "closed" },
    ],
  },
  parameters: componentDoc("ListOption", { barrel: "option-select" }),
} satisfies Meta<typeof ListOption>

export default meta
type Story = StoryObj<typeof meta>

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

export const Preselected: Story = {
  args: { label: "Status", modelValue: "open" },
}

export const Clearable: Story = {
  args: { label: "Clearable", modelValue: "open", clearable: true },
}

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

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

export const WithHelpText: Story = {
  args: { label: "Status", helpText: "Pick a workflow state." },
}

export const WithErrors: Story = {
  args: { label: "Status", errors: ["Pick one."] },
}
