import type { WidgetSlot } from "@racletteCore/store/types/index"

export type DraggableType =
  | "ticket"
  | "user"
  | "tag"
  | "organization"
  | "project"
  | "content"
  | "block"
  | "widget"
  | "page"

type BasePayload = {
  draggableElement: HTMLElement
  targetElement: HTMLElement
  draggableConfig: DraggableConfig
}

export type OnDropFunction = (
  payload: BasePayload & {
    droppableConfig: DroppableConfig
    index: number
  },
) => void

export type OnResizeFunction = (
  payload: BasePayload & {
    cols: number
    width: number
  },
) => void

export type DraggableConfig = {
  widgetName?: string
  type?: DraggableType
  handleElement?: HTMLElement
  onDrop?: OnDropFunction
  onDragStart?: Function
  onDragEnd?: (x: Number, y: Number) => void
  resize?: Boolean
  onResize?: OnResizeFunction
  anchorToCorner?: Boolean
  widget?: WidgetSlot
  pluginKey?: string
}

export type DroppableConfig = {
  groups?: DraggableType[]
  sortable?: "horizontal" | "vertical"
  onDrop?: OnDropFunction
  cloneZIndex?: number
}

export type ClonedDraggableItem = { element: HTMLElement; rect: DOMRect }
