import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";

class Popper extends IgniteElement {
    constructor() {
        super();
    }

    get properties() {
        return {
            position: "bottom",
            show: new IgniteProperty(false, () => {
                if (this.show) {
                    this.firstUpdate();
                } else {
                    if (this.updateTimeout) {
                        clearTimeout(this.updateTimeout);
                    }

                    this.updateTimeout = null;
                }
            }),
            updateTimeout: null,
            offset: "0.5em"
        }
    }

    render() {
        return this.template.child(
            new slot(this)
                .style("position", "absolute")
                .style("top", this.position, true, value => { return value == "bottom" ? "100%" : null; })
                .style("bottom", this.position, true, value => { return value == "top" ? "100%" : null; })
                .style("margin-top", this.position, true, value => { return this.position == "bottom" ? this.offset : null })
                .style("margin-bottom", this.position, true, value => { return this.position == "top" ? this.offset : null })
                .style("left", "0")
                .style("width", "100%")
                .style("z-index", "99999")
                .hide(this.show, value => { return !value; })
        );
    }

    ready() {
        this.firstUpdate();
    }

    firstUpdate() {
        if (this.show && this.updateTimeout == null) {
            this.updateTimeout = setTimeout(() => this.update(), 200);
        }
    }

    update() {
        if (this.show) {
            this.updateTimeout = setTimeout(() => this.update(), 200);
        }

        var thisBounds = this.firstChild.getBoundingClientRect();
        var parentBounds = this.offsetParent.getBoundingClientRect();

        var thisOffset = 0;
        if (this.firstChild.offsetTop < 0) {
            thisOffset = Math.abs(this.firstChild.offsetTop + thisBounds.height);
        } else {
            thisOffset = this.firstChild.offsetTop - parentBounds.height;
        }

        if (thisBounds.y < 0 && this.position != "bottom") {
            this.position = "bottom";
        } else if (thisBounds.y + thisBounds.height >= window.innerHeight && this.position != "top") {
            this.position = "top";
        } else if (parentBounds.height + parentBounds.y + thisBounds.height + thisOffset <= window.innerHeight && this.position != "bottom") {
            this.position = "bottom";
        }
    }

    cleanup() {
        if (this.updateTimeout) {
            clearTimeout(this.updateTimeout);
        }
    }
}

customElements.define("mt-popper", Popper);

class PopperTemplate extends IgniteTemplate {
    constructor(...children) {
        super("mt-popper", children);
    }
}

export {
    PopperTemplate as Popper
}