import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { CardElement } from "@/definitions/elements"
import ElementsBlock from "./ElementsBlock.vue"

const meta = {
  title: "Elements/ConfigurationBlock/ElementsBlock",
  component: ElementsBlock,
  tags: ["autodocs"],
  args: {
    label: "Elements Block",
  },
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { ElementsBlock } from \"@gxp-dev/mod-ui/configuration-block\"\n```\n\nRenderer for `configuration-block/elements-block`. Renders nested children via the engine.",
      },
    },
  },
} satisfies Meta<typeof ElementsBlock>

export default meta
type Story = StoryObj<typeof meta>

const nameFields: CardElement[] = [
  {
    id: "child-first",
    type: "input.text",
    name: "first_name",
    label: "First name",
  } as CardElement,
  {
    id: "child-last",
    type: "input.text",
    name: "last_name",
    label: "Last name",
  } as CardElement,
]

export const Default: Story = {
  args: {},
}

export const WithLabel: Story = {
  args: {
    label: "Profile settings",
  },
}

export const WithNestedElements: Story = {
  args: {
    label: "Profile",
    nestedElements: nameFields as unknown as Array<Record<string, unknown>>,
  },
}
