#Mount

import { createTransferScope, GRID_DATA, itemViewsEqual, mountGrid, selectItemView } from 'gridla/dom'
import type { GridHandle, GridItemRenderer, GridItemView, GridPositioning, MountGridOptions, TransferScope } from 'gridla/dom'

export function createTransferScope(): TransferScope

export function itemViewsEqual(a: GridItemView, b: GridItemView): boolean

export function mountGrid<TData = unknown>(
  element: HTMLElement,
  options: MountGridOptions<TData> = {},
): GridHandle<TData>

export function selectItemView<TData>(state: GridState<TData>, itemId: string): GridItemView

export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }

export type GridHandle<TData = unknown> = {
  /** The canvas element the grid was mounted on. */
  element: HTMLElement
  /** The underlying controller: store, actions, and gesture API. */
  controller: GridController<TData>
  /** Replace the layout. In controlled mode call this from `onLayoutChange`. */
  setLayout: (layout: GridLayout<TData>) => void
  /** The layout in effect, in the caller's coordinates (the last one set or committed). */
  getLayout: () => GridLayout<TData>
  /** Subscribe to controller state. Returns an unsubscribe function. */
  subscribe: (listener: (state: GridState<TData>) => void) => () => void
  /** Select an item, or clear the selection with `null`. */
  select: (itemId: string | null) => void
  /** Apply changed options; the canvas re-renders once. */
  setOptions: (options: Partial<MountGridOptions<TData>>) => void
  /** Remove listeners, observers, rendered elements, and unregister from the transfer scope. */
  destroy: () => void
}

export type GridItemRenderer<TData = unknown> = (
  item: GridItem<TData>,
  element: HTMLElement,
  view: GridItemView,
) => void

export type GridItemView = {
  /** Where the item is painted right now (preview-aware). */
  rect: GridRect
  /** Where the item was before the current gesture. */
  baseRect: GridRect
  /** Cursor-tracked rect while this item is active; `null` otherwise. */
  activeRect: GridRect | null
  isActive: boolean
  isSelected: boolean
  /** True when this item moved in the preview because another item pushed it. */
  isShifted: boolean
  /** True while the active item is being previewed in another canvas. */
  isTransferring: boolean
  interaction: GridInteraction | null
}

export type GridPositioning = 'transform' | 'absolute'

export type MountGridOptions<TData = unknown> = GridControllerOptions<TData> &
  GridPointerGestureOptions & {
    /**
     * Paint an item's content. Without a renderer each item shows its id as
     * text (set once, when the element is created).
     */
    renderItem?: GridItemRenderer<TData>
    /**
     * Create the element for an item. Defaults to a `div`. Use it to adopt
     * elements that already exist (custom elements do this).
     */
    createItemElement?: (item: GridItem<TData>) => HTMLElement
    /** Dispose the element of an item that left the layout. Defaults to `element.remove()`. */
    removeItemElement?: (element: HTMLElement, itemId: string) => void
    /**
     * `true` (default): the whole item element is a drag surface. `false`:
     * only descendants marked `data-gridla-drag-handle` start a move.
     */
    draggable?: boolean
    /** Edges to render built-in resize handles for. Default: none. */
    resizeEdges?: readonly GridResizeEdge[]
    /** Class name for built-in resize handles. */
    resizeHandleClassName?: string
    /**
     * Render the drop outline (`data-gridla-preview`). `true` creates a `div`;
     * pass an element to use it instead. It is shown only while a gesture has
     * an accepted preview. Default `false`.
     */
    preview?: boolean | HTMLElement
    /** Position elements with `transform` (default) or with `left`/`top`. */
    positioning?: GridPositioning
    /** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
    followPointer?: boolean
  }

export type TransferScope = {
  /** Add a canvas. Returns a function that removes it again. */
  register: (registration: TransferRegistration) => () => void
  /** Called by the source canvas on every pointer move during a drag (client coordinates). */
  track: (sourceId: string, itemId: string, client: GridPoint) => void
  /** Called by the source canvas on release. Returns `true` when a transfer happened. */
  drop: (sourceId: string) => boolean
  /** Abandon the current transfer session and clear any target preview. */
  cancel: () => void
}