import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { ObjectBuilderSchema } from "@/stores/objectBuilderStore"
import ObjectBuilder from "./ObjectBuilder.vue"

const seededSchema: ObjectBuilderSchema = {
  entries: [
    {
      id: "seed-title",
      key: "title",
      type: "string",
      value: "Welcome",
    },
    {
      id: "seed-count",
      key: "max_attendees",
      type: "number",
      value: 250,
    },
    {
      id: "seed-active",
      key: "is_active",
      type: "boolean",
      value: true,
    },
    {
      id: "seed-tags",
      key: "tags",
      type: "array",
      value: ["staff", "vip"],
    },
    {
      id: "seed-meta",
      key: "meta",
      type: "object",
      value: { theme: "default" },
    },
    {
      id: "seed-other",
      key: "owner",
      type: "null",
      value: null,
    },
  ],
}

const meta = {
  title: "Elements/Builder/ObjectBuilder",
  component: ObjectBuilder,
  tags: ["autodocs"],
  args: {
    label: "Object Builder",
  },
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "```ts\nimport { ObjectBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisually compose a JSON object as a list of typed key / value entries. Each row carries a `key`, a `type` (string / number / boolean / array / object / null), and a `value`. The output is bindable via v-model.",
      },
    },
  },
} satisfies Meta<typeof ObjectBuilder>

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 FromPlainRecord: Story = {
  name: "Plain Record<string, unknown>",
  args: {
    modelValue: {
      title: "From record",
      count: 5,
      enabled: false,
      items: ["a", "b"],
    },
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { ObjectBuilder },
    setup() {
      const variants: Array<{ label: string; modelValue?: unknown }> = [
        { label: "Empty config" },
        { label: "Theme settings", modelValue: seededSchema },
        {
          label: "From record",
          modelValue: { name: "Demo", count: 3, enabled: true } as Record<
            string,
            unknown
          >,
        },
      ]
      return { variants }
    },
    template: `
      <div class="flex flex-col gap-6 p-4">
        <ObjectBuilder
          v-for="(v, i) in variants"
          :key="i"
          :label="v.label"
          :model-value="v.modelValue"
          :builder-id="'showcase-' + i"
        />
      </div>
    `,
  }),
}
