import './style.scss'
const Cesium = (window as any).Cesium

interface Ipopup {
    destroy(): void
}

export class MapPopup implements Ipopup {
    private viewer: any;
    private lonLatAlt: number[];
    private popupContainer: HTMLElement;
    private title: String;
    private html: HTMLElement | string;
    private cureBtnClick: Function;

    private renderCellback: Function = null;

    constructor(options: any) {
        const { lon, lat, alt, viewer, title, html, cureBtnClick } = options;
        this.lonLatAlt = this.checkLonLatAlt(lon, lat, alt);
        this.html = html || '';
        this.title = title || '';
        this.viewer = viewer;
        this.cureBtnClick = cureBtnClick || undefined;
        this.init();
    }
    init() {
        if (!this.popupContainer) {
            const target = this.viewer.container as HTMLElement;
            this.popupContainer = this.createDom('div', 'map-popup', target);
            let titleDiv = this.createDom('div', 'map-popup-title', this.popupContainer);
            let titleText = this.createDom('div', 'title-text', titleDiv);
            let closer = this.createDom('span', 'popup-close iconfont iconsc', titleDiv);
            let linkBtn = this.createDom('span', 'curve-link', titleDiv);
            let containerDiv = this.createDom('div', 'popup-container', this.popupContainer);
            titleText.innerText = this.title.toString();
            titleText.title = this.title.toString();
            linkBtn.innerText = '历史曲线';
            containerDiv.innerHTML = this.html.toString();
            linkBtn.addEventListener('click', () => {
                this.cureBtnClick()
            });
            // 销毁
            closer.addEventListener('click', () => {
                this.destroy()
            });
        }
        this.setPosition();
    }

    /**
     * 弹窗位置
     */
    setPosition() {
        if (this.renderCellback) {
            this.renderCellback();
            this.renderCellback = null;
        }
        this.renderCellback = this.viewer.scene.postRender.addEventListener((e) => {
            const windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                this.viewer.scene,
                Cesium.Cartesian3.fromDegrees(this.lonLatAlt[0], this.lonLatAlt[1], this.lonLatAlt[2])
            );
            this.popupContainer.style.left = windowPosition.x + 'px'
            this.popupContainer.style.top = windowPosition.y + 'px'
        })
    }
    /**
     * 创建元素
     */
    createDom(tagName: string, className?: string, container?: Element): HTMLElement {
        const element = document.createElement(tagName);
        if (className !== undefined) element.className = className;
        if (container) container.appendChild(element);
        return element;
    }

    /**
     * 销毁弹窗
     */
    destroy() {
        if (this.renderCellback) {
            this.renderCellback();
            this.renderCellback = null;
        }
        if (this.popupContainer && this.popupContainer.parentNode) {
            this.popupContainer.parentNode.removeChild(this.popupContainer);
        }
    }

    /**
     * 清除所有弹窗
     */
    static clearAll() {
        const viewer = (window as any).viewer
        const target = viewer.container as HTMLElement;
        let mapPopups = target.getElementsByClassName("map-popup");
        if (mapPopups.length > 0){
            for (let index = 0; index < mapPopups.length; index++) {
                const popup = mapPopups[index];
                popup.parentNode.removeChild(popup)
            }
            this.clearAll()
        }
    }


    /**
     * 校验经纬度
     */
    checkLonLatAlt(lon: number, lat: number, alt?: number) {
        const position = { lon, lat, alt };
        if (!(typeof lon === "number") || !(typeof lat === "number")) {
            throw "无效的经纬度";
        }
        if (!alt) position.alt = 0;
        return [lon, lat, alt];
    }
}
