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

/**
 * `element-list` card — the most common container. Renders a list of
 * CardElements stacked vertically (with responsive column wrapping).
 *
 * v1 schema calls this `fields_list` and uses a `fieldsList` array
 * containing flat element definitions. The adapter translates these
 * into v2's `elementList` of element IDs that reference entries in the
 * page's `elements` map.
 */
export interface ElementListCard extends BaseCard<"element-list"> {
  cardType: "element-list"
  /** Ordered list of element IDs the renderer should resolve + render. */
  elementList: string[]
  /** Optional icon (used when this card is inside a tab-list). */
  icon?: string
  /** Optional asset reference (used when this card is inside a tab-list). */
  imageAsset?: string | { id: string; url: string }
  /** Vertical gap between elements. */
  gutterY?: string
  /** Horizontal gap between elements. */
  gutterX?: string
}

export const ElementListCardDefaults = {
  cardType: "element-list",
  elementList: [],
  showCard: true,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
  gutterY: "1rem",
  gutterX: "1rem",
} as const satisfies Partial<ElementListCard>

export const ElementListCardMetadata = {
  icon: "list",
  displayLabel: "Element List",
  elementCategory: "display",
  description:
    "A vertical stack of CardElements. The default container for forms and detail panels.",
} as const satisfies ElementMetadata

export const ElementListCardEditConfig = {
  title: {
    type: "input.text",
    label: "Title",
    columns: 12,
    section: "configuration",
  },
  showCard: {
    type: "boolean.switch",
    defaultValue: true,
    label: "Show Card Chrome",
    columns: 12,
    section: "layout",
  },
  gutterY: {
    type: "input.text",
    label: "Vertical Gap",
    columns: 6,
    section: "layout",
  },
  gutterX: {
    type: "input.text",
    label: "Horizontal Gap",
    columns: 6,
    section: "layout",
  },
} as const satisfies EditConfig

/**
 * EditConfig variant for an ElementListCard nested inside a TabListCard
 * — picks up extra inspector fields (icon, image asset) used by the tab
 * label.
 */
export const TabContainerElementListCardEditConfig = {
  ...ElementListCardEditConfig,
  icon: {
    type: "picker.icon",
    label: "Tab Icon",
    columns: 6,
    section: "configuration",
  },
  imageAsset: {
    type: "file.asset-picker",
    label: "Tab Image",
    columns: 6,
    section: "configuration",
  },
} as const satisfies EditConfig
