import type { ComponentBounds, Hookable } from './hooks.js'
import type { Context } from './context.js'
import type { ComponentInstance, ComponentState, StateBase } from './component.js'
import type { App } from './app.js'
import type { ID } from './util.js'

export interface DevtoolsPluginApi<TSettings> {
  on: Hookable<Context>
  notifyComponentUpdate (instance?: ComponentInstance): void
  addTimelineLayer (options: TimelineLayerOptions): void
  addTimelineEvent (options: TimelineEventOptions): void
  addInspector (options: CustomInspectorOptions): void
  sendInspectorTree (inspectorId: string): void
  sendInspectorState (inspectorId: string): void
  selectInspectorNode (inspectorId: string, nodeId: string): void
  getComponentBounds (instance: ComponentInstance): Promise<ComponentBounds>
  getComponentName (instance: ComponentInstance): Promise<string>
  getComponentInstances (app: App): Promise<ComponentInstance[]>
  highlightElement (instance: ComponentInstance): void
  unhighlightElement (): void
  getSettings (pluginId?: string): TSettings
  now (): number
  /**
   * @private Not implemented yet
   */
  setSettings (values: TSettings): void
}

export interface AppRecord {
  id: string
  name: string
  instanceMap: Map<string, ComponentInstance>
  rootInstance: ComponentInstance
}

export interface TimelineLayerOptions<TData = any, TMeta = any> {
  id: string
  label: string
  color: number
  skipScreenshots?: boolean
  groupsOnly?: boolean
  ignoreNoDurationGroups?: boolean
  screenshotOverlayRender?: (event: TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent, ctx: ScreenshotOverlayRenderContext) => ScreenshotOverlayRenderResult | Promise<ScreenshotOverlayRenderResult>
}

export interface ScreenshotOverlayEvent {
  layerId: string
  renderMeta: any
}

export interface ScreenshotOverlayRenderContext<TData = any, TMeta = any> {
  screenshot: ScreenshotData
  events: (TimelineEvent<TData, TMeta> & ScreenshotOverlayEvent)[]
  index: number
}

export type ScreenshotOverlayRenderResult = HTMLElement | string | false

export interface ScreenshotData {
  time: number
}

export interface TimelineEventOptions {
  layerId: string
  event: TimelineEvent
  all?: boolean
}

export interface TimelineEvent<TData = any, TMeta = any> {
  time: number
  data: TData
  logType?: 'default' | 'warning' | 'error'
  meta?: TMeta
  groupId?: ID
  title?: string
  subtitle?: string
}

export interface TimelineMarkerOptions {
  id: string
  time: number
  color: number
  label: string
  all?: boolean
}

export interface CustomInspectorOptions {
  id: string
  label: string
  icon?: string
  treeFilterPlaceholder?: string
  stateFilterPlaceholder?: string
  noSelectionText?: string
  actions?: {
    icon: string
    tooltip?: string
    action: () => void | Promise<void>
  }[]
  nodeActions?: {
    icon: string
    tooltip?: string
    action: (nodeId: string) => void | Promise<void>
  }[]
}

export interface CustomInspectorNode {
  id: string
  label: string
  children?: CustomInspectorNode[]
  tags?: InspectorNodeTag[]
}

export interface InspectorNodeTag {
  label: string
  textColor: number
  backgroundColor: number
  tooltip?: string
}

export interface CustomInspectorState {
  [key: string]: (StateBase | Omit<ComponentState, 'type'>)[]
}