import { BaseElement } from "../../../shared/_base";
import { CodeEditorContainer } from "../code-editor-container/code-editor-container";
import './window-control-connector.less';

export class WindowControlConnector extends BaseElement {

    onInit(): void {
        this.addEventListener("click", () => {
            this.toggle();
        })
    }

    toggle() {
        if (this.classList.contains("active")) {
            this.deactivate();
        }
        else {
            this.activate();
        }
    }

    activate() {
        this.classList.add("active");
        var target = this.getTarget();

        if (target) {
            target.classList.add("active");
            target.style.display = "block";
        }

        this.distributeEvenly();
    }

    deactivate() {
        this.classList.remove("active");
        var target = this.getTarget();

        if (target) {
            target.classList.remove("active");
            target.style.display = "none";
        }

        this.distributeEvenly();
    }

    private distributeEvenly() {
        var elements = <CodeEditorContainer[]>this.findVisible("code-editor-container");
        var containers = document.getElementsByClassName("code-editor-containers")[0];

        if (elements.length === 0) {
            containers.classList.add("force-close");
        }
        else {
            containers.classList.remove("force-close");
            var size = (100 / elements.length) + "%";
            for (let i = 0; i < elements.length; i++) {
                const element = elements[i];

                element.style.minHeight = size;
                element.style.maxHeight = size;
            }
        }
    }

    private getTarget() {
        var attr = this.getAttribute("target");
        if (attr) {
            return <HTMLElement>document.querySelector(attr);
        }

        return null;
    }

}