import { anchorType, IMarker, IMarkerLayer, IPopup, Marker, MarkerLayer, Popup, Scene } from "@antv/l7";
import HPaaSL7 from "../HPaaSL7";
import Overlay from "./Overlay";
const css = `

 `;
let instanceID = 1;
class Tooltips {
  // 存储所有生成的实例，保证每次只显示一个
  static instances: Tooltips[] = [];
  private _marker!: IPopup;
  public ele!: HTMLElement;
  private id = instanceID++;
  private _x = -80;
  private _y = -80;
  private hpaas!: HPaaSL7;
  private overlayUid = "";
  private offsetY = 10;
  constructor(hpaas: HPaaSL7, overlayUid: string, offsetY = 10) {
    this.hpaas = hpaas;
    this.overlayUid = overlayUid;
    this.ele = document.createElement("div");
    this.ele.className = "yc-tooltips";
    this.ele.id = "tooltip_" + this.overlayUid;
    this.ele.style.zIndex = "100000";
    this.offsetY = offsetY;
    this.createLayer();
    this.createCss();
    Tooltips.instances.push(this);
  }
  createCss() {
    const style = document.createElement("style");

    style.appendChild(document.createTextNode(css));

    document.getElementsByTagName("head")[0].appendChild(style);
  }
  private createLayer() {
    if (!this.hpaas.sceneLoaded) {
      this.hpaas.l7Scene.on("loaded", () => {
        this.createLayer();
      });
      return;
    }

    this._marker = new Popup({
      offsets: [0, this.offsetY],
      closeButton: false,
      stopPropagation: false,
    })

      .setLnglat({ lng: this._x, lat: this._y })
      .setDOMContent(this.ele);
    // this.markerLayer.addMarker(this._marker);
    // this.scene.addMarkerLayer(this.markerLayer);
    this.hpaas.l7Scene.addPopup(this._marker);
  }

  public setHTML(text: string) {
    this.ele.innerHTML = text;
    return this;
  }
  public setDom(dom: HTMLElement) {
    this.ele.innerHTML = "";
    this.ele.appendChild(dom);
    return this;
  }
  public moveTo(x: number, y: number) {
    this._x = x;
    this._y = y;
    this.hpaas.sceneLoaded && this._marker.setLnglat({ lng: this._x, lat: this._y });
    return this;
  }
  public setId(id: string) {
    this.ele.id = id;
    return this;
  }
  public hide() {
    this.ele.style.visibility = "hidden";
    this.hpaas.sceneLoaded && this._marker && this._marker.close();
    return this;
  }
  public show() {
    Tooltips.instances.forEach((instance) => {
      if (instance.id != this.id) {
        instance.hide();
      }
    });
    this.ele.style.visibility = "visible";
    this.hpaas.sceneLoaded && this._marker && this._marker.open();
    return this;
  }
  public toggleShow() {
    if (this.ele.style.visibility == "visible") {
      this.hide();
    } else {
      this.show();
    }
  }
  public remove() {
    return this;
  }
  public addEleClassName(newClassName: string) {
    this.ele.className += " " + newClassName;
  }
}

export default Tooltips;