import { ContainerElement, buildUI, type ChildrenFn, type ContainerStyle, type DrawableStyle, type ElementStyle, type UIChildArg, type UIContainerBase, type UINodeChild } from "./UINode"

export type UIContainerStyle = ElementStyle & DrawableStyle & ContainerStyle

/** A vertical flex container — children stack top to bottom. */
export interface UIColumn extends UIContainerBase<UIContainerStyle> {
  readonly type: "column",
}
const makeColumn = (style: any, children: any) => new ContainerElement("column", style, children)

/** @internal Compiler fast path (chisel `flatten_ui` raw lowering): construction with a proven
 *  plain-children array — or a reactive ChildrenFn (the Element constructor branches on
 *  `typeof === "function"` either way) — skipping the buildUI argument dispatch entirely. */
export const __UIColumn = (children: UINodeChild[] | ChildrenFn): UIColumn => makeColumn({}, children)
export const __UIRow = (children: UINodeChild[] | ChildrenFn): UIRow => makeRow({ flexDirection: "row" }, children)
export const __UIBox = (children: UINodeChild[] | ChildrenFn): UIBox => makeBox({ ...BOX_DEFAULTS }, children)

/** Create a vertical flex container. Children are variadic — arrays flatten one level, falsy
 *  entries are skipped; a lone function makes the children reactive. */
export function UIColumn(...children: UIChildArg[]): UIColumn
export function UIColumn(children: UINodeChild[] | ChildrenFn): UIColumn
/** @deprecated Style as the first argument is legacy — use chained `.style({...})`. */
export function UIColumn(style: UIContainerStyle, children?: UINodeChild[] | ChildrenFn): UIColumn
export function UIColumn(...args: any[]): UIColumn {
  return buildUI(args, null, makeColumn)
}

/** A horizontal flex container — children flow left to right. */
export interface UIRow extends UIContainerBase<UIContainerStyle> {
  readonly type: "row",
}
const ROW_DEFAULTS = { flexDirection: "row" } as const
const makeRow = (style: any, children: any) => new ContainerElement("row", style, children)

/** Create a horizontal flex container (same argument forms as `UIColumn`). */
export function UIRow(...children: UIChildArg[]): UIRow
export function UIRow(children: UINodeChild[] | ChildrenFn): UIRow
/** @deprecated Style as the first argument is legacy — use chained `.style({...})`. */
export function UIRow(style: UIContainerStyle, children?: UINodeChild[] | ChildrenFn): UIRow
export function UIRow(...args: any[]): UIRow {
  return buildUI(args, ROW_DEFAULTS, makeRow)
}

/** A centering container — `justifyContent`/`alignItems` default to center. */
export interface UIBox extends UIContainerBase<UIContainerStyle> {
  readonly type: "box",
}
const BOX_DEFAULTS = { justifyContent: "center", alignItems: "center" } as const

const makeBox = (style: any, children: any) => new ContainerElement("box", style, children)

/** Create a centering container — children are centered on both axes by default (icon badges,
 *  avatars, empty states). Same argument forms as `UIColumn`. */
export function UIBox(...children: UIChildArg[]): UIBox
export function UIBox(children: UINodeChild[] | ChildrenFn): UIBox
/** @deprecated Style as the first argument is legacy — use chained `.style({...})`. */
export function UIBox(style: UIContainerStyle, children?: UINodeChild[] | ChildrenFn): UIBox
export function UIBox(...args: any[]): UIBox {
  return buildUI(args, BOX_DEFAULTS, makeBox)
}
