

import {Widget} from "widget/Widget";
import {Composite} from "widget/Composite";
import {CollapseButton} from "widget/CollapseButton";
import {Layout} from "layout/Layout";
import {SideNav} from "layout/SideNav";
import {SideNavLayoutData} from "layout/SideNavLayoutData";

export class SideNavLayout extends Layout {
    private mediaQueryList: MediaQueryList;
    private mediaQueryListener: MediaQueryListListener;
    public sideNav: SideNav;

    private $nav: JQuery;
    private $content: JQuery;
    private collapseButton: CollapseButton;
    private hadBindedCollapse: boolean = false;

    public constructor(composite: Composite) {
        super(composite);
    }

    public setCollapseButton(collapseButton: CollapseButton) {
        this.collapseButton = collapseButton;
        this.bindCollapseButton();
    }

    private bindCollapseButton() {
        if (!this.hadBindedCollapse && this.sideNav && this.collapseButton) {
            this.sideNav.bind(this.collapseButton.$thisNode);
            this.hadBindedCollapse = true;
        }
    }

    public layout() {
        let navChild: Widget = null;
        let contentChild: Widget = null;
        let navLayoutData: SideNavLayoutData = null;

        for (let child of this.composite.children) {
            let direction = (child.layoutData as SideNavLayoutData).direction;
            if (!navChild && direction !== SideNavLayoutData.NONE) {
                navChild = child;
                navLayoutData = child.layoutData as SideNavLayoutData;
            } else if (!contentChild && direction === SideNavLayoutData.NONE) {
                contentChild = child;
            }
        }

        contentChild.$thisNode.css({
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
        });
        this.$nav = $(`<div class="side-nav fixed" id="slide-out"></div>`);
        this.$nav.css("width", navLayoutData.width);

        this.$content = $(`<div></div>`);
        this.$content.css({
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
        });

        navChild.$thisNode.appendTo(this.$nav);
        contentChild.$thisNode.appendTo(this.$content);
        this.$nav.appendTo(this.composite.$attachNode);
        this.$content.appendTo(this.composite.$attachNode);

        this.sideNav = new SideNav();
        this.bindCollapseButton();

        this.sideNav.init("slide-out", {
            width: navLayoutData.width,
            edge: navLayoutData.direction === SideNavLayoutData.LEFT ? "left" : "right"
        });

        this.mediaQueryList = window.matchMedia("only screen and (max-width : 992px)");
        let own = this;
        this.mediaQueryListener = function (mql: MediaQueryList) {
            if (mql.matches) {
                if (navLayoutData.direction === SideNavLayoutData.LEFT) {
                    own.$content.css("left", 0);
                } else {
                    own.$content.css("right", 0);
                }
            } else {
                if (navLayoutData.direction === SideNavLayoutData.LEFT) {
                    own.$content.css("left", navLayoutData.width + "px");
                } else {
                    own.$content.css("right", navLayoutData.width + "px");
                }
            }
        };
        this.mediaQueryList.addListener(this.mediaQueryListener);
        this.mediaQueryListener(this.mediaQueryList);
    }

    public toString(): string {
        return "SideNavLayout";
    }

    public dispose() {
        if (this.mediaQueryList && this.mediaQueryListener) {
            this.mediaQueryList.removeListener(this.mediaQueryListener);
        }
        if (this.sideNav) {
            this.sideNav.dispose();
        }
        if (this.$nav) {
            this.$nav.remove();
        }
        if (this.$content) {
            this.$content.remove();
        }
    }
}