import type { Meta, StoryObj } from "@storybook/vue3-vite"
import { FieldFrame } from "."
import { Input } from "@/components/ui/input"

const meta = {
  title: "UI/FieldFrame",
  component: FieldFrame,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { FieldFrame } from \"@gxp-dev/mod-ui\"\n```\n\nShared chrome (label + helpText + error list) wrapped around any input-bearing slot. Used internally by every input composition.",
      },
    },
  },
} satisfies Meta<typeof FieldFrame>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Field label" },
  render: (args) => ({
    components: { FieldFrame, Input },
    setup() {
      return { args }
    },
    template: `
      <FieldFrame v-bind="args">
        <Input placeholder="Type here..." />
      </FieldFrame>
    `,
  }),
}

export const Required: Story = {
  args: { label: "Email", required: true },
  render: (args) => ({
    components: { FieldFrame, Input },
    setup() {
      return { args }
    },
    template: `
      <FieldFrame v-bind="args">
        <Input type="email" placeholder="you@example.com" />
      </FieldFrame>
    `,
  }),
}

export const WithHelpText: Story = {
  args: {
    label: "Username",
    helpText: "Lowercase letters, numbers, and underscores only.",
  },
  render: (args) => ({
    components: { FieldFrame, Input },
    setup() {
      return { args }
    },
    template: `
      <FieldFrame v-bind="args">
        <Input />
      </FieldFrame>
    `,
  }),
}

export const WithErrors: Story = {
  args: {
    label: "Password",
    errors: ["Must be at least 8 characters.", "Must include a number."],
  },
  render: (args) => ({
    components: { FieldFrame, Input },
    setup() {
      return { args }
    },
    template: `
      <FieldFrame v-bind="args">
        <Input type="password" />
      </FieldFrame>
    `,
  }),
}

export const HiddenLabel: Story = {
  args: { label: "Hidden but accessible", hideLabel: true },
  render: (args) => ({
    components: { FieldFrame, Input },
    setup() {
      return { args }
    },
    template: `
      <FieldFrame v-bind="args">
        <Input placeholder="Aria-labelled but visually hidden" />
      </FieldFrame>
    `,
  }),
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { FieldFrame, Input },
    template: `
      <div class="flex flex-col gap-6 max-w-md">
        <FieldFrame label="Default">
          <Input />
        </FieldFrame>
        <FieldFrame label="Required" required>
          <Input />
        </FieldFrame>
        <FieldFrame label="With help text" help-text="Some helpful hint">
          <Input />
        </FieldFrame>
        <FieldFrame
          label="With errors"
          required
          :errors="['Field is required.', 'Try again.']"
        >
          <Input />
        </FieldFrame>
      </div>
    `,
  }),
}
