import { EditorProperties } from "@iplusplus/y-model"
import { ControlData, ControlTypeInfo, Size } from "../types"

import * as createjs from "createjs-module"
import { TypedControl } from "../TypedControl"

export abstract class EmbeddedPageControl<P extends EditorProperties> extends TypedControl<P> {
  internalUrl: string = ""
  shape: createjs.Shape = new createjs.Shape()
  iframetag?: HTMLIFrameElement
  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)
  }

  reDraw(): void {
    if (!this.inPage()) {
      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)
    }
    if (this.iframetag) {
      this.iframetag.style.height = this.size.height + "px"
      this.iframetag.style.width = this.size.width + "px"
    }
  }

  abstract getUrl(): string

  startRun(): void {
    const url = this.getUrl()
    if (!url) return
    const api = this.inPage()
    if (api === undefined) return
    this.iframetag = document.createElement("iframe")

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

    this.iframetag.style.position = "absolute"
    this.iframetag.style.top = "0"
    this.iframetag.style.left = "0"
    this.iframetag.style.background="transparent";

    api.getHomeDiv().appendChild(this.iframetag)

    const gg = new createjs.DOMElement(this.iframetag)
    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.addDestroyCallback(() => {
      if (this.iframetag) {
        api.getHomeDiv().removeChild(this.iframetag)
        this.iframetag = undefined
        console.log("destory url")
      }
    })
  }
}