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

const meta = {
  title: "Elements/Input/BarcodeScannerInput",
  component: BarcodeScannerInput,
  tags: ["autodocs"],
  args: {
    label: "Scan ticket",
  },
  parameters: componentDoc("BarcodeScannerInput", { barrel: "input" }),
} satisfies Meta<typeof BarcodeScannerInput>

export default meta
type Story = StoryObj<typeof meta>

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

export const WithInitialValue: Story = {
  args: { label: "Scan ticket", modelValue: "ABC-123-DEF" },
}

export const WithError: Story = {
  args: {
    label: "Scan ticket",
    errors: ["Camera access denied."],
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { BarcodeScannerInput },
    template: `
      <div class="flex flex-col gap-6 max-w-xl">
        <BarcodeScannerInput label="Default" />
        <BarcodeScannerInput
          label="With value"
          model-value="EAN-13-0123456789012"
        />
        <BarcodeScannerInput
          label="With help"
          help-text="Allow camera access and point at a barcode."
        />
        <BarcodeScannerInput
          label="With error"
          :errors="['Camera blocked by browser permissions.']"
        />
      </div>
    `,
  }),
}
