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

const meta = {
  title: "Elements/ConfigurationBlock/DialogBlock",
  component: DialogBlock,
  tags: ["autodocs"],
  args: {
    label: "Dialog",
  },
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { DialogBlock } from \"@gxp-dev/mod-ui/configuration-block\"\n```\n\nRenderer for `configuration-block/dialog`. Wraps nested children in a modal dialog.",
      },
    },
  },
} satisfies Meta<typeof DialogBlock>

export default meta
type Story = StoryObj<typeof meta>

const firstNameField: CardElement = {
  id: "child-first",
  type: "input.text",
  name: "first_name",
  label: "First name",
} as CardElement

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

export const WithLabel: Story = {
  args: {
    label: "Plugin configuration",
    triggerLabel: "Configure plugin",
    title: "Plugin configuration",
  },
}

export const WithNestedElements: Story = {
  args: {
    label: "Edit profile",
    triggerLabel: "Edit profile",
    title: "Edit profile",
    nestedElements: [firstNameField],
  },
}
