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

const meta = {
  title: "Elements/ConfigurationBlock/RepeatableBlock",
  component: RepeatableBlock,
  tags: ["autodocs"],
  args: {
    label: "Repeatable",
  },
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { RepeatableBlock } from \"@gxp-dev/mod-ui/configuration-block\"\n```\n\nRenderer for `configuration-block/repeatable`. Each row gets its own isolated formDataStore slot via `provideFormId`. Rows are collapsible; `optionLabelFields` controls the row header label.",
      },
    },
  },
} satisfies Meta<typeof RepeatableBlock>

export default meta
type Story = StoryObj<typeof meta>

const tierTemplate: CardElement[] = [
  {
    id: "tier-name",
    type: "input.text",
    name: "tier_name",
    label: "Tier name",
  } as CardElement,
  {
    id: "tier-limit",
    type: "input.number",
    name: "tier_limit",
    label: "Limit",
  } as CardElement,
]

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

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

export const WithLabel: Story = {
  args: {
    label: "Speakers",
    addButtonLabel: "Add speaker",
  },
}

export const WithSeededRows: Story = {
  args: {
    label: "Sponsor tiers",
    addButtonLabel: "Add tier",
    modelValue: [{ tier_name: "Gold", tier_limit: 5 }, { tier_name: "Silver", tier_limit: 10 }],
    nestedElements: tierTemplate as unknown as Array<Record<string, unknown>>,
    optionLabelFields: ["tier_name"],
  },
}

export const CollapsedByDefault: Story = {
  args: {
    label: "Speaker",
    addButtonLabel: "Add speaker",
    collapsedByDefault: true,
    modelValue: [{}, {}],
    nestedElements: speakerTemplate as unknown as Array<Record<string, unknown>>,
    optionLabelFields: ["first_name", "last_name"],
  },
}

export const WithLabelFields: Story = {
  args: {
    label: "Speaker",
    addButtonLabel: "Add speaker",
    modelValue: [{ first_name: "Jane", last_name: "Doe" }],
    nestedElements: speakerTemplate as unknown as Array<Record<string, unknown>>,
    optionLabelFields: ["first_name", "last_name"],
  },
}
