import BackgroundLayer from "../components/BackgroundLayer"
import { GroupControlData } from "../internal-controls/GroupControl"
import { CommApi, Control, PageApi, PageData } from "../types"
import createjs from "createjs-module"
let gId = 0
export class PageLoader {
  stage?: createjs.Stage
  canvas?: HTMLCanvasElement
  background?: BackgroundLayer
  resizeObserver: ResizeObserver
  mainControl?: Control
  inFullscreen = false
  instId: number
  api: PageApi
  adaptMode?: number
  currentPageData?: PageData
  private destroyed: boolean = false
  homeDiv: HTMLDivElement
  domDiv: HTMLDivElement
  constructor(
    api: CommApi,
    private parentDiv: HTMLDivElement,
    adaptMode?: number
  ) {
    this.adaptMode = adaptMode;
    this.homeDiv = this.initHomeDiv()
    this.domDiv = this.initDomDiv();

    this.instId = gId++
    this.api = {
      ...api,
      apiName: "PageApi",
      getHomeDiv: () => this.homeDiv,
      getDomDiv : ()=>this.domDiv
    }
    //console.log("page loader constructor", this.instId )
    this.parentDiv.appendChild(this.homeDiv)
    this.homeDiv.appendChild(this.domDiv)
    //console.log(this.parentDiv,this.instId);
    this.resizeObserver = new ResizeObserver(this.resetSize2)
    this.resizeObserver.observe(this.homeDiv)
    //console.log(this.homeDiv,this.instId);;
  }

  private initHomeDiv(): HTMLDivElement {
    const div = document.createElement<"div">("div")
    div.style.height = "100%"
    if (this.adaptMode === 1) {
      div.style.overflowY = "auto"
    } else {
      div.style.overflow = "hidden"
    }

    div.style.lineHeight = "0"
    div.style.position = "relative"
    return div
  }

  private initDomDiv(): HTMLDivElement {
    const div = document.createElement<"div">("div")
    div.style.position = "absolute";
    div.style.left = "0";
    div.style.top = "0";
    div.style.transformOrigin = "0 0";
    const dpr = window.devicePixelRatio || 1;
    if(dpr !==1){
      div.style.transform = `scale(${1 / dpr})`;
    }
    return div
  }

  loadPage(pageData: PageData) {
    if (this.destroyed) {
      return
    }

    this.clear()
    this.currentPageData = pageData;
    this.canvas = document.createElement<"canvas">("canvas")
    //this.homeDiv.insertBefore(this.canvas,this.domDiv)
    this.homeDiv.appendChild(this.canvas)
    this.stage = new createjs.Stage(this.canvas)
    this.stage.enableMouseOver(10)

    this.background = new BackgroundLayer(pageData.width, pageData.height, this.api)
    if (pageData.backgroundImgId) {
      this.background.setBackgroundImage(pageData.backgroundImgId)
    }
    this.background.on("dblclick", () => {
      this.switchFullscreen()
    })

    this.stage.addChild(this.background)
    const groupControlData: GroupControlData = {
      subControls: pageData.controls,
      x: 0,
      y: 0,
      width: pageData.width,
      height: pageData.height,
      controlType: "Group",
      customProperties: {},
    }
    this.mainControl = this.api.createControl(groupControlData)
    this.stage.addChild(this.mainControl.getDisplayObject())
    this.mainControl.initControl(this.api)
    this.mainControl.startRun()
    this.resetSize()
    createjs.Ticker.addEventListener("tick", this.updateStage)
  }

  resetSize = () => {
    //console.log("resize1", this.instId )
    const dpr = window.devicePixelRatio || 1;

    let width = this.homeDiv.clientWidth;
    let height = this.homeDiv.clientHeight;
    let physicsWidth = width * dpr;
    let physicsHeigth = height * dpr;
    if (this.canvas && this.background && this.mainControl && this.currentPageData && width > 0 && height > 0) {
      if (this.adaptMode === 1) {
        const rate = width / this.currentPageData.width
        height = this.currentPageData.height * rate
        physicsHeigth = height * dpr
      }
      this.canvas.width = physicsWidth
      this.canvas.height = physicsHeigth

      this.canvas.style.width = width + "px";
      this.canvas.style.height = height + "px";
      if (dpr !== 1) {
        this.canvas.getContext("2d")?.scale(dpr, dpr)
      }

      this.background.changeSize(physicsWidth, physicsHeigth)
      this.mainControl.size.width = physicsWidth
      this.mainControl.size.height = physicsHeigth
      //console.log("physicsWidth",physicsWidth,"physicsHeigth",physicsHeigth)
      this.mainControl.reDraw()
    }
  }
  resetSize2 = (entries: ResizeObserverEntry[]) => {
    //console.log("resize2", this.instId)
    window.requestAnimationFrame((): void | undefined => {
      if (!Array.isArray(entries) || !entries.length) {
        return
      }
      this.resetSize()
    })
  }
  updateStage = () => {
    this.stage?.update()
  }

  switchFullscreen() {
    if (this.inFullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      }
      this.inFullscreen = false
    } else {
      //	var i = this.div.children("canvas")[0];
      const i = this.homeDiv
      // go full-screen
      if (i.requestFullscreen) {
        i.requestFullscreen()
        this.inFullscreen = true
      }
    }
  }

  clear() {
    //console.log("page loader clear ", this.instId)

    this.background?.removeAllEventListeners()
    createjs.Ticker.removeEventListener("tick", this.updateStage)
    this.mainControl?.destroy()
    this.homeDiv.innerHTML = ""
    this.domDiv = this.initDomDiv();
    this.homeDiv.append(this.domDiv)
    this.stage = undefined
    this.background = undefined
    this.canvas = undefined
    this.mainControl = undefined
    this.currentPageData = undefined;
  }

  destroy() {
    //console.log("page loader destroy xx ", this.instId)
    if (!this.destroyed) {
      //console.log("page loader destroy", this.instId)
      this.clear()
      this.resizeObserver.disconnect()
      this.parentDiv.removeChild(this.homeDiv)
     // this.parentDiv.removeChild(this.domDiv)
      this.destroyed = true
    }
  }
}