import { EditorProperties } from "@iplusplus/y-model"
import * as createjs from "createjs-module"
import { ControlData, ControlTypeInfo, Size } from "../types"
import { TypedControl } from "../TypedControl"

export abstract class EmbeddedDivControl<P extends EditorProperties> extends TypedControl<P> {
  shape: createjs.Shape = new createjs.Shape()
  divTag?: HTMLDivElement
  constructor(props: P, controlTypeInfo: ControlTypeInfo, controlData?: ControlData) {
    super(props, controlTypeInfo, controlData)
  }

  getDefaultSize(): Size {
    return {
      width: 300,
      height: 200,
    }
  }

  assembleComponents(): void {
    this.container.addChild(this.shape)
  }

  onDivSizeChanged() {}

  reDraw(): void {
    if (this.inPage()) {
      if (this.divTag) {
        this.divTag.style.height = this.size.height + "px"
        this.divTag.style.width = this.size.width + "px"
        this.onDivSizeChanged()
      }
    } else {
      const g = this.shape.graphics
      const { width, height } = this.size
      g.clear()
      g.ss(1).s("yellow").drawRoundRect(0, 0, width, height, 0).drawEllipse(0, 0, width, height)
      g.mt(0, 0).lt(width, height)
      g.mt(width, 0).lt(0, height)
    }
  }

  // abstract getDiv():HTMLDivElement;

  abstract startRunDiv(div: HTMLDivElement): void

  abstract destoryDiv(): void

  startRun(): void {
    // const url = this.getUrl();
    //  if(!url) return;
    const api = this.inPage()
    if (api === undefined) return

    this.divTag = document.createElement("div")
    // this.divTag.style.borderStyle = "solid"
    // this.divTag.style.borderColor = "white"
    // this.divTag.style.borderWidth = "3px"

    this.divTag.style.height = this.size.height + "px"
    this.divTag.style.width = this.size.width + "px"

    this.divTag.style.position = "absolute"
    this.divTag.style.top = "0"
    this.divTag.style.left = "0"
    const homeDiv = api.getDomDiv()
    homeDiv.appendChild(this.divTag)

    const gg = new createjs.DOMElement(this.divTag)
    gg.x = 0
    gg.y = 0
    this.container.addChild(gg)
    // this.iframetag.setAttribute("src", url);
    // this.iframetag.setAttribute("frameborder", '0');
    // this.iframetag.setAttribute("scrolling", 'no');
    this.startRunDiv(this.divTag)

    this.addDestroyCallback(() => {
      if (this.divTag) {
        this.destoryDiv()

        homeDiv.removeChild(this.divTag)
        this.divTag = undefined
      }
    })
  }
}