import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { ElementListBuilderSchema } from "@/stores/elementListBuilderStore"
import ElementListBuilder from "./ElementListBuilder.vue"

const seededSchema = {
  elements: [
    {
      id: "first-name",
      type: "input.text",
      name: "first_name",
      label: "First name",
      required: true,
    },
    {
      id: "email",
      type: "input.email",
      name: "email",
      label: "Email",
      required: true,
      placeholder: "you@example.com",
    },
    {
      id: "active",
      type: "boolean.switch",
      name: "is_active",
      label: "Active",
    },
  ],
} as unknown as ElementListBuilderSchema

const meta = {
  title: "Elements/Builder/ElementListBuilder",
  component: ElementListBuilder,
  tags: ["autodocs"],
  args: {
    label: "Element List Builder",
  },
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "```ts\nimport { ElementListBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nA simplified FormBuilder that produces a flat list of CardElements (no cards, no tabs, no nested cards). Useful for forms-as-arrays and list-of-fields configs.",
      },
    },
  },
} satisfies Meta<typeof ElementListBuilder>

export default meta
type Story = StoryObj<typeof meta>

export const Empty: Story = {
  name: "Empty (default)",
  args: {},
}

export const WithSeededSchema: Story = {
  name: "Pre-populated schema",
  args: {
    modelValue: seededSchema,
  },
}

export const ReadOnlyPreview: Story = {
  name: "Custom label",
  args: {
    label: "Author element list",
    modelValue: seededSchema,
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { ElementListBuilder },
    setup() {
      const variants: Array<{
        label: string
        modelValue?: ElementListBuilderSchema
      }> = [
        { label: "Empty list" },
        { label: "Sidebar elements", modelValue: seededSchema },
        { label: "Mobile elements", modelValue: seededSchema },
      ]
      return { variants }
    },
    template: `
      <div class="flex flex-col gap-6 p-4">
        <ElementListBuilder
          v-for="(v, i) in variants"
          :key="i"
          :label="v.label"
          :model-value="v.modelValue"
          :builder-id="'showcase-' + i"
        />
      </div>
    `,
  }),
}
