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

const meta = {
  title: "Elements/ConfigurationBlock/ModalBlock",
  component: ModalBlock,
  tags: ["autodocs"],
  parameters: componentDoc("ModalBlock", { barrel: "configuration-block" }),
  args: {
    label: "Modal",
  },
} satisfies Meta<typeof ModalBlock>

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 WithCustomLabel: Story = {
  args: {
    label: "Custom inline label",
    triggerLabel: "Open settings",
    title: "Custom inline modal",
  },
}

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