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

/**
 * `card-list` card — a list of nested cards. Each entry in `cardList` is
 * the ID of another DisplayCard resolved from the page's `cards` map.
 *
 * Optionally draggable: when the renderer hosts the list inside a
 * drag-and-drop zone, `dragTargetData` is the payload identifier that
 * downstream drop handlers (e.g. the FormBuilder) use to figure out
 * where new items should land.
 */
export interface CardListCard extends BaseCard<"card-list"> {
  cardType: "card-list"
  /** Ordered list of card IDs the renderer should resolve + render. */
  cardList: 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 }
  /** Enable drag-and-drop reordering of nested cards. */
  draggable?: boolean
  /** Identifier delivered to drop handlers when items are dragged out. */
  dragTargetData?: string
  /** Vertical gap between nested cards. */
  gutterY?: string
  /** Horizontal gap between nested cards. */
  gutterX?: string
}

export const CardListCardDefaults = {
  cardType: "card-list",
  cardList: [],
  showCard: true,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
  draggable: false,
  gutterY: "1rem",
  gutterX: "1rem",
} as const satisfies Partial<CardListCard>

export const CardListCardMetadata = {
  icon: "th-large",
  displayLabel: "Card List",
  elementCategory: "display",
  description:
    "A list of nested cards. The default container for grouping cards together.",
} as const satisfies ElementMetadata

export const CardListCardEditConfig = {
  title: {
    type: "input.text",
    label: "Title",
    columns: 12,
    section: "configuration",
  },
  showCard: {
    type: "boolean.switch",
    defaultValue: true,
    label: "Show Card Chrome",
    columns: 12,
    section: "layout",
  },
  draggable: {
    type: "boolean.switch",
    defaultValue: false,
    label: "Allow Drag & Drop",
    columns: 12,
    section: "configuration",
  },
  dragTargetData: {
    type: "input.text",
    label: "Drag Target Identifier",
    columns: 12,
    section: "configuration",
    conditionParams: [
      {
        name: "draggable",
        logic: "==",
        value: true,
      },
    ],
  },
  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 a CardListCard nested inside a TabListCard
 * — picks up extra inspector fields (icon, image asset) used by the tab
 * label.
 */
export const TabContainerCardListCardEditConfig = {
  ...CardListCardEditConfig,
  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
