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

const meta = {
  title: "Elements/Boolean/CheckboxBoolean",
  component: CheckboxBoolean,
  tags: ["autodocs"],
  parameters: componentDoc("CheckboxBoolean", { barrel: "boolean" }),
  args: { label: "I agree to the terms" },
} satisfies Meta<typeof CheckboxBoolean>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "I agree to the terms" },
}

export const Required: Story = {
  args: { label: "I agree to the terms", required: true },
}

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

export const Checked: Story = {
  args: { label: "Pre-checked", modelValue: true },
}

export const WithHelpText: Story = {
  args: {
    label: "Subscribe to newsletter",
    helpText: "We will only email you once a month.",
  },
}

export const WithErrors: Story = {
  args: {
    label: "I agree",
    required: true,
    errors: ["You must accept the terms to continue."],
  },
}

export const HiddenLabel: Story = {
  args: { label: "Hidden", hideLabel: true },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { CheckboxBoolean },
    template: `
      <div class="flex flex-col gap-4 max-w-md">
        <CheckboxBoolean label="Default" />
        <CheckboxBoolean label="Required" required />
        <CheckboxBoolean label="Pre-checked" :model-value="true" />
        <CheckboxBoolean label="Disabled" disabled :model-value="true" />
        <CheckboxBoolean
          label="With help text"
          help-text="Some helpful hint"
        />
        <CheckboxBoolean
          label="With errors"
          required
          :errors="['You must accept the terms.']"
        />
      </div>
    `,
  }),
}
