/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * Special Declaration: These technical material reserved as the technical secrets by AGREE 
 * TECHNOLOGY have been protected by the "Copyright Law" "ordinances on Protection of Computer 
 * Software" and other relevant administrative regulations and international treaties. Without 
 * the written permission of the Company, no person may use (including but not limited to the 
 * illegal copy, distribute, display, image, upload, and download) and disclose the above 
 * technical documents to any third party. Otherwise, any infringer shall afford the legal 
 * liability to the company.
 */
import { Widget } from "widget/Widget";
import { Composite } from "widget/Composite";
import { Layout } from "layout/Layout";
import { HeaderFooterLayoutData } from "layout/HeaderFooterLayoutData";

export class HeaderFooterLayout extends Layout {
    private header: Widget;
    private footer: Widget;
    private body: Widget;

    private lastHeaderSize: string;
    private lastFooterSize: string;
    private headerMutationObserver: MutationObserver;
    private footerMutationObserver: MutationObserver;
    private horizontalSizeChangeListener: any;



    public static LayoutOrientation = {
        VERTICAL: 0,
        HORIZONTAL: 1
    };

    //布局方向,默认是垂直布局
    private layoutOrientation: number = HeaderFooterLayout.LayoutOrientation.VERTICAL;
    //是否支持可隐藏footer区域
    private hiddenFooter: boolean = false;

    public constructor(composite: Composite, layoutOrientation: number, hiddenFooter: boolean) {
        super(composite);
        this.layoutOrientation = layoutOrientation;
        this.hiddenFooter = hiddenFooter;
    }

    private selectChildren() {
        for (let child of this.composite.children) {
            /** 
             *由于FloatPanelComposite必须放在body根节点，所以使用自己的append(先暂时如此处理) 
             * modified by huangdeyun
             */
            if (/*child instanceof FloatPanelComposite*/child.getId().indexOf("FloatPanelComposite") !== -1) {
                child.append();
                continue;
            }
            if (!(child instanceof Composite) || !(child.layoutData instanceof HeaderFooterLayoutData)) {
                continue;
            }

            let layoutData = child.layoutData as HeaderFooterLayoutData;

            if (!this.header && layoutData.style === HeaderFooterLayoutData.Style.HEADER) {
                this.header = child;
            } else if (!this.footer && layoutData.style === HeaderFooterLayoutData.Style.FOOTER) {
                this.footer = child;
            } else if (!this.body && layoutData.style === HeaderFooterLayoutData.Style.BODY) {
                this.body = child;
            }
        }
    }

    private horizontalLayout() {
        let own = this;
        let headerWidth = 0;
        let footerWidth = 0;
        if (this.header) {
            headerWidth = this.header.layoutData.height;

            this.header.$thisNode.css({
                position: "absolute",
                height: "100%",
                width: headerWidth + "px"
            });

            this.header.append();
        }

        if (this.footer) {
            footerWidth = this.footer.layoutData.height;
            this.footer.$thisNode.css({
                position: "absolute",
                height: "100%",
                width: footerWidth + "px",
                bottom: "0px",
                top: "0px",
                right: "0px",
                transition: "width 0.4s"
            });
            this.footer.append();
        }

        if (this.body) {
            this.body.$thisNode.css({
                position: "absolute",
                top: 0,
                bottom: 0,
                left: headerWidth + "px",
                right: footerWidth + "px",
                transition: "width 0.4s"
            });

            this.body.append();
        }

        own.horizontalSizeChangeListener = function () {
            own.body.$thisNode.css({
                width: own.composite.$thisNode.get(0).clientWidth - own.header.$thisNode.get(0).clientWidth
                - own.footer.$thisNode.get(0).clientWidth + "px"
            });
        };
        $(window).on("resize", own.horizontalSizeChangeListener);
    }

    private verticalLayout() {
        let own = this;
        let headerHeight = 0;
        let footerHeight = 0;
        if (this.header) {
            headerHeight = this.header.layoutData.height;
            this.header.$thisNode.css({
                position: "absolute",
                width: "100%",
                height: headerHeight + "px"
            });

            this.header.append();
        }

        if (this.footer) {
            footerHeight = this.footer.layoutData.height;
            this.footer.$thisNode.css({
                position: "absolute",
                width: "100%",
                height: footerHeight + "px",
                bottom: "0px",
                left: "0px",
                right: "0px",
                transition: "height 0.4s"
            });

            this.footer.append();


        }

        if (this.body) {
            this.body.$thisNode.css({
                position: "absolute",
                left: 0,
                right: 0,
                top: headerHeight + "px",
                bottom: footerHeight + "px",
                transition: "height 0.4s"

            });
            this.body.append();
        }
    }

    public layout() {
        let css = this.composite.$thisNode.get(0).style;
        if (!css.position || css.position === "" || css.position === "static") {
            css.position = "relative";
        }

        this.selectChildren();

        if (this.layoutOrientation === HeaderFooterLayout.LayoutOrientation.HORIZONTAL) {
            this.horizontalLayout();
        } else {
            this.verticalLayout();
        }
        this.handleHiddenFooter();
    }
    public dispose() {
        if (this.headerMutationObserver) {
            this.headerMutationObserver.disconnect();
        }
        if (this.footerMutationObserver) {
            this.footerMutationObserver.disconnect();
        }
        //去掉窗口上绑定的重制宽度事件
        $(window).off("resize", this.horizontalSizeChangeListener);
    }

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

    private handleHiddenFooter() {
        if (this.hiddenFooter && this.footer && this.body) {
            let hideFooterButton = $("<div class='adore_footer_hide_button waves-effect waves-light large mdi-content-clear'></div>");
            let showFooterButton = $("<img src='images/layout/showFooterIcon.png' class='adore_footer_show_button waves-effect waves-light'></img>");
            let isVertical = true;
            if (this.layoutOrientation === HeaderFooterLayout.LayoutOrientation.HORIZONTAL) {
                isVertical = false;
            }
            hideFooterButton.css({
                transition: "opacity 0.2s,visibility 0.2s"
            });
            showFooterButton.css({
                transition: "opacity 0.2s,visibility 0.2s"
            });
            let own = this;
            //隐藏按钮以及其相关事件
            hideFooterButton.on("click", function () {
                own.hideFooter(hideFooterButton, showFooterButton, isVertical);
            });
            //显示按钮以及其相关事件
            showFooterButton.on("click", function () {
                own.showFooter(hideFooterButton, showFooterButton, isVertical);
            });
            this.footer.$thisNode.append(hideFooterButton);
            this.composite.$thisNode.append(showFooterButton);
            //初始化时隐藏footer
            this.hideFooter(hideFooterButton, showFooterButton, isVertical);
        }
    }

    private hideFooter(hideFooterButton: JQuery, showFooterButton: JQuery, isVertical: boolean) {
        hideFooterButton.css({
            visibility: "hidden",
            opacity: 0
        });
        showFooterButton.css({
            visibility: "visible",
            opacity: 1
        });
        let footerWidthOrHeight = this.footer.layoutData.height;
        if (isVertical) {
            //这里别修改两个css设置的顺序
            this.footer.$thisNode.css({
                height: 0
            });
            this.body.$thisNode.css({
                height: this.composite.$thisNode.get(0).clientHeight - this.header.$thisNode.get(0).clientHeight + "px"
            });
        } else {
            //这里别修改两个css设置的顺序
            this.footer.$thisNode.css({
                width: 0
            });
            this.body.$thisNode.css({
                width: this.composite.$thisNode.get(0).clientWidth - this.header.$thisNode.get(0).clientWidth + "px"
            });
        }
    }

    private showFooter(hideFooterButton: JQuery, showFooterButton: JQuery, isVertical: boolean) {
        hideFooterButton.css({
            visibility: "visible",
            opacity: 1
        });
        showFooterButton.css({
            visibility: "hidden",
            opacity: 0
        });
        let footerWidthOrHeight = this.footer.layoutData.height;
        if (isVertical) {
            //这里别修改两个css设置的顺序
            this.footer.$thisNode.css({
                height: footerWidthOrHeight + "px"
            });
            this.body.$thisNode.css({
                height: this.composite.$thisNode.get(0).clientHeight - this.header.$thisNode.get(0).clientHeight -
                footerWidthOrHeight + "px"
            });
        } else {
            //这里别修改两个css设置的顺序
            this.footer.$thisNode.css({
                width: footerWidthOrHeight + "px"
            });
            this.body.$thisNode.css({
                width: this.composite.$thisNode.get(0).clientWidth - this.header.$thisNode.get(0).clientWidth -
                footerWidthOrHeight + "px"
            });
        }
    }

}