import type {
  BaseElement,
  EditConfig,
  ElementMetadata,
} from "@/definitions/shared/base"

/**
 * Variants of the `configuration-block` element type. Each value here maps
 * 1:1 to a Vue file under `src/elements/configuration-block/` via the
 * engine's registry.
 *
 * The v2 schema spells the elements-list variant as "elements" — we accept
 * both "elements" (legacy) and "elements-block" (canonical) by widening
 * the style accordingly.
 */
export type ConfigurationBlockStyle =
  | "elements-block"
  | "repeatable"
  | "dialog"
  | "modal"

export interface ConfigurationBlockElement
  extends BaseElement<`configuration-block.${ConfigurationBlockStyle}`> {
  name?: string | null
  label?: string
  /**
   * Child element / card payload. For `repeatable` this is the schema
   * for one row; for `dialog` / `modal` / `elements-block` this is the
   * full child tree. Kept loose to avoid a circular reference.
   */
  selectOptions?: ReadonlyArray<Record<string, unknown>>
  /** For `repeatable`: label on the "add row" button. */
  addOptionButtonLabel?: string
  /** For `repeatable`: which child fields to summarise in each row's header. */
  optionLabelFields?: ReadonlyArray<string>
  /** For `dialog` / `modal`: label on the trigger button. */
  triggerButtonLabel?: string
  /** For `dialog` / `modal`: dialog/modal title. */
  dialogTitle?: string
  /** Initial collapsed state for `repeatable` rows. */
  collapsedByDefault?: boolean
}

export const ConfigurationBlockElementDefaults = {
  type: "configuration-block.elements-block",
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
} as const satisfies Partial<ConfigurationBlockElement>

export const ConfigurationBlockElementMetadata = {
  icon: "square-dashed-circle-plus",
  displayLabel: "Configuration Group",
  elementCategory: "configuration-block",
  description:
    "Create a group of configuration elements, these can be repeatable element blocks, modals or dialogs.",
} as const satisfies ElementMetadata

export const ConfigurationBlockElementEditConfig = {
  label: {
    type: "input.text",
    defaultValue: "",
    label: "Label",
    columnsMd: 6,
    columns: 12,
    section: "configuration",
  },
  name: {
    type: "picker.data-model",
    defaultValue: "",
    label: "Name",
    columns: 12,
    section: "advanced",
  },
  style: {
    type: "option-select.select",
    defaultValue: "elements-block",
    label: "Configuration Style",
    selectOptions: [
      { label: "Elements List", value: "elements-block" },
      { label: "Repeatable", value: "repeatable" },
      { label: "Dialog", value: "dialog" },
      { label: "Modal", value: "modal" },
    ],
    columns: 12,
    section: "layout",
  },
  addOptionButtonLabel: {
    type: "input.text",
    label: "Add Button Label",
    columns: 6,
    section: "configuration",
    conditionParams: [{ name: "style", logic: "==", value: "repeatable" }],
  },
  collapsedByDefault: {
    type: "boolean.switch",
    label: "Collapse rows by default",
    columns: 6,
    section: "layout",
    conditionParams: [{ name: "style", logic: "==", value: "repeatable" }],
  },
  triggerButtonLabel: {
    type: "input.text",
    label: "Trigger Button Label",
    columns: 6,
    section: "configuration",
    conditionParams: [
      { name: "style", logic: "in-array", value: ["dialog", "modal"] },
    ],
  },
  dialogTitle: {
    type: "input.text",
    label: "Dialog Title",
    columns: 6,
    section: "configuration",
    conditionParams: [
      { name: "style", logic: "in-array", value: ["dialog", "modal"] },
    ],
  },
} as const satisfies EditConfig

export const ConfigurationBlockStyleMetadataMap: Partial<Record<ConfigurationBlockStyle, { displayLabel: string; description: string }>> = {
  repeatable: { displayLabel: "Repeatable", description: "A repeatable row of fields the user can add/remove." },
  dialog: { displayLabel: "Dialog", description: "A configuration block that opens in a modal dialog." },
  modal: { displayLabel: "Modal", description: "A full configuration panel that renders in an overlay modal." },
}
