import { ControlLayer } from "../components/ControlLayer"
import BackgroundLayer, { BoxSelectEvent } from "../components/BackgroundLayer"
import { CommApi, DesignerApi, DesignerEventDefine, DesignerEventType, PageData } from "../types"
import { moveAction } from "./move-actions"
import * as createjs from "createjs-module"

let gId = 0
export class PageDesigner {
  canvas: HTMLCanvasElement
  stage: createjs.Stage

  width: number
  height: number
  background: BackgroundLayer
  controlLayer: ControlLayer
  api: DesignerApi
  private destroyed: boolean = false
  instId: number
  homeDiv: HTMLDivElement

  constructor(
    api: CommApi,
    private parentDiv: HTMLDivElement,
  ) {
    this.instId = gId++
    this.width = 1920
    this.height = 1080

    this.canvas = this.initCanvas()
    this.stage = this.initStage()
    this.api = {
      ...api,
      apiName: "DesignerApi",
    }
    this.background = new BackgroundLayer(this.width, this.height, this.api)
    // if (pageData.backgroundImgId) {
    //   this.background.setBackgroundImage(pageData.backgroundImgId);
    // }
    this.stage.addChild(this.background)

    this.controlLayer = new ControlLayer(this.width, this.height, this.api)
    this.stage.addChild(this.controlLayer)
    this.stage.addChild(this.background.selectBorder)

    this.background.on("boxSelect", evt => {
      const e = evt as BoxSelectEvent
      this.controlLayer.selectControl(e.x1, e.y1, e.x2, e.y2, e.isAdd)
    })
    // pageData.controls.forEach(c => {
    //   this.controlLayer.addControl(this.api.createControl(c), c.x, c.y);
    // })

    window.addEventListener("keydown", this.keyEventHandler, true)
    this.homeDiv = this.initHomeDiv()
    this.homeDiv.appendChild(this.canvas)

    this.parentDiv.appendChild(this.homeDiv)
    // console.log("PageDesigner", this.instId, " construct")
  }

  loadPage(pageData: PageData,options?:{
    showDebug?: boolean
  }) {
    const showDebug = options?.showDebug || false;
    if (this.destroyed) {
      return
    }
    this.controlLayer.clear()
    if (pageData.backgroundImgId) {
      this.background.setBackgroundImage(pageData.backgroundImgId)
    }
    this.changeSize(pageData.width,pageData.height);
    pageData.controls.forEach(c => {
      showDebug && console.log("add control", c);
      this.controlLayer.addControl(this.api.createControl(c), c.x, c.y);
      showDebug && console.log("add control ok", c);
    })
  }

  keyEventHandler = (ev: KeyboardEvent) => {
    const offset = moveAction(ev)
    if (offset) {
      this.controlLayer.setSelectedPositionCustom(offset)
    }
  }

  changeSize(width?: number, height?: number) {
    width = width || this.width
    height = height || this.height
    this.width = width
    this.height = height
    this.canvas.width = width
    this.canvas.height = height
    this.background.changeSize(width, height)
    this.controlLayer.changeSize(width,height)
  }

  addEventListener<E extends DesignerEventType, T extends DesignerEventDefine[E]>(
    eventType: DesignerEventType,
    handler: T,
  ) {
    this.controlLayer.addEventListener(eventType, handler as unknown as (eventObj: object) => void)
    return handler
  }

  removeEventListener<E extends DesignerEventType, T extends DesignerEventDefine[E]>(
    eventType: DesignerEventType,
    handler: T,
  ) {
    this.controlLayer.removeEventListener(eventType, handler as unknown as (eventObj: object) => void)
    return handler
  }

  private initCanvas(): HTMLCanvasElement {
    const canvas = document.createElement<"canvas">("canvas")
    canvas.width = this.width
    canvas.height = this.height
    return canvas
  }

  private initHomeDiv(): HTMLDivElement {
    const div = document.createElement<"div">("div")
    div.style.height = "100%"
    div.style.overflow = "scroll"
    return div
  }

  updateStage = () => {
    this.stage.update()
  }

  private initStage(): createjs.Stage {
    const stage = new createjs.Stage(this.canvas)
    createjs.Ticker.framerate = 60
    createjs.Ticker.addEventListener("tick", this.updateStage)

    return stage
  }

  destroy() {
    if (this.destroyed) {
      return
    }
    this.controlLayer.destroy()
    createjs.Ticker.removeEventListener("tick", this.updateStage)

    window.removeEventListener("keydown", this.keyEventHandler, true)

    while (this.homeDiv.firstChild) {
      this.homeDiv.removeChild(this.homeDiv.firstChild)
    }
    this.homeDiv.style.display = "none"
    this.parentDiv.removeChild(this.homeDiv)
    this.destroyed = true
    //   console.log("PageDesigner", this.instId, " destroy")
  }

  isDestroyed() {
    return this.destroyed
  }

  getPageData(): PageData {
    return {
      width: this.width,
      height: this.height,
      backgroundImgId: this.background.imageId,
      controls: this.controlLayer.getControlsData(),
    }
  }
}