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

/**
 * Visual layout variants accepted by `style`.
 *
 * - `default`   — Vertical tab list (tabs on the side).
 * - `horizontal` — Tabs rendered horizontally along the top.
 */
export type TabListCardStyle = "default" | "horizontal"

/**
 * `tab-list` card — a list of tabs. Each entry in `tabList` is the ID of
 * a nested card (typically an ElementListCard or CardListCard) resolved
 * from the page's `cards` map. The nested card's `title`, `icon`, and
 * `imageAsset` are used to label the tab.
 */
export interface TabListCard extends BaseCard<"tab-list"> {
  cardType: "tab-list"
  /** Ordered list of card IDs to render as tab panels. */
  tabList: string[]
  /** Visual variant (vertical or horizontal). */
  style?: TabListCardStyle
  /** Image displayed alongside the tab nav. */
  imageAsset?: string | { id: string; url: string }
  /** Icon displayed alongside the tab nav. */
  icon?: string
  /** Force the nav bar to render above the panel content. */
  navOnTop?: boolean
  /** Hide the nav bar entirely (used when an external nav controls the tabs). */
  hideNav?: boolean
  /**
   * ID of an external tab-control element that should drive this tab
   * list. Allows a sibling component to act as the visible nav.
   */
  controlTabId?: string | null
}

export const TabListCardDefaults = {
  cardType: "tab-list",
  tabList: [],
  showCard: true,
  columns: 12,
  columnsSm: 12,
  columnsMd: 12,
  columnsLg: 12,
  columnsXl: 12,
  style: "default",
  navOnTop: false,
  hideNav: false,
  controlTabId: null,
} as const satisfies Partial<TabListCard>

export const TabListCardMetadata = {
  icon: "folder-closed",
  displayLabel: "Tab List",
  elementCategory: "display",
  description:
    "A list of tabs that can be used to display and organize display cards.",
} as const satisfies ElementMetadata

export const TabListCardEditConfig = {
  title: {
    type: "input.text",
    label: "Title",
    columns: 12,
    section: "configuration",
  },
  style: {
    type: "option-select.select",
    label: "Style",
    columns: 12,
    section: "layout",
    selectOptions: [
      { label: "Vertical", value: "default" },
      { label: "Horizontal", value: "horizontal" },
    ],
  },
  navOnTop: {
    type: "boolean.switch",
    label: "Use Top Navigation",
    section: "layout",
    columns: 12,
  },
  hideNav: {
    type: "boolean.switch",
    label: "Hide Navigation Bar",
    section: "layout",
    columns: 12,
  },
  showCard: {
    type: "boolean.switch",
    defaultValue: true,
    label: "Show Card Chrome",
    columns: 12,
    section: "layout",
  },
  imageAsset: {
    type: "file.asset-picker",
    label: "Image Asset",
    columns: 6,
    section: "configuration",
    acceptedFileTypes: [".jpg", ".jpeg", ".png", ".gif", ".svg", ".webp"],
  },
  icon: {
    type: "picker.icon",
    label: "Icon",
    columns: 6,
    section: "configuration",
  },
  controlTabId: {
    type: "option-select.select",
    label:
      "Control Tab ID (Allow this tab navigation to control this tab list)",
    columns: 12,
    section: "layout",
    selectOptions: [],
  },
} as const satisfies EditConfig
