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

/**
 * `element-display` card — renders a single CardElement standalone (no
 * label, no column wrapping, no card chrome by default).
 *
 * This is the v2 equivalent of the v1 schema's `component` card type:
 * a thin wrapper used when you want a single element (typically a chart,
 * a media player, or a custom widget) to occupy a card slot without the
 * surrounding ElementListCard structure.
 */
export interface ElementDisplayCard extends BaseCard<"element-display"> {
  cardType: "element-display"
  /** ID of the single element this card renders. */
  elementId: 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 }
}

export const ElementDisplayCardDefaults = {
  cardType: "element-display",
  showCard: false,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
} as const satisfies Partial<ElementDisplayCard>

export const ElementDisplayCardMetadata = {
  icon: "chart-line",
  displayLabel: "Element Display",
  elementCategory: "display",
  description: "A card to display a single element.",
} as const satisfies ElementMetadata

export const ElementDisplayCardEditConfig = {
  title: {
    type: "input.text",
    label: "Title",
    columns: 12,
    section: "configuration",
  },
  elementId: {
    type: "option-select.select",
    label: "Element",
    columns: 12,
    section: "configuration",
    selectOptions: [],
  },
  showCard: {
    type: "boolean.switch",
    defaultValue: false,
    label: "Show Card Chrome",
    columns: 12,
    section: "layout",
  },
} as const satisfies EditConfig
