import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { PresetBuilderSchema } from "@/stores/presetBuilderStore"
import PresetBuilder from "./PresetBuilder.vue"

const seededSchema: PresetBuilderSchema = {
  presetName: "Brand kit",
  presetDescription: "Default colors and typography",
  schema: {
    rootCardId: "root",
    cards: {
      root: {
        id: "root",
        cardType: "element-list",
        elementList: ["primary", "secondary", "label"],
      } as never,
    },
    elements: {
      primary: {
        id: "primary",
        type: "picker.color",
        name: "primary_color",
        label: "Primary color",
      } as never,
      secondary: {
        id: "secondary",
        type: "picker.color",
        name: "secondary_color",
        label: "Secondary color",
      } as never,
      label: {
        id: "label",
        type: "input.text",
        name: "label",
        label: "Display label",
      } as never,
    },
  },
}

const meta = {
  title: "Elements/Builder/PresetBuilder",
  component: PresetBuilder,
  tags: ["autodocs"],
  args: {
    label: "Preset",
  },
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "```ts\nimport { PresetBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nBundles a named, described preset around an embedded FormBuilder schema.",
      },
    },
  },
} satisfies Meta<typeof PresetBuilder>

export default meta
type Story = StoryObj<typeof meta>

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

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

export const Showcase: Story = {
  args: {
    modelValue: seededSchema,
  },
}
