import {Component, ElementRef, OnInit} from '@angular/core';
import {Router} from "@angular/router";
import SettingService from "@common/services/setting";
import UtilService from "@common/services/util";
import SiteRouterService from "@common/services/siteRouter";
import StorageService from "@common/services/storage";
import {routerManager} from "@common/appRouting";

declare const document: any;
declare const $: any;

@Component({
    selector: 'siteNavBar',
    templateUrl: './template.html',
    styleUrls: ['./style.less']
})
export default class SiteNavBar implements OnInit {
    private siteMenuBar: string = '';
    private classNames: any = [];
    private fullEv: boolean = false;
    private element: any;
    private $navList: any = [];
    private $menuNavList: any = [];
    private siteNavBarCollapseShow: boolean;
    private siteNavBarColumnDisplayBgColor: boolean;
    private deviceWidthType: string;
    private siteNavBarBgColor: string;
    private siteMainNav: any;
    private dropdown: any;

    constructor(private router: Router,
                private settingService: SettingService,
                private siteRouterService: SiteRouterService,
                private utilService: UtilService,
                private storageService: StorageService,
                private el: ElementRef) {
        this.element = $(el.nativeElement);
        this.siteMenuBar = this.settingService.siteMenuBar;
        this.settingService.toggleMenuBarEvent.subscribe(value => {
            this.siteMenuBar = value;
        });

        this.siteMainNav = this.siteRouterService.siteMainNav;
        this.siteRouterService.siteMainNavEvent.subscribe(value => {
            this.siteMainNav = value;
        });

        this.siteNavBarCollapseShow = this.settingService.siteNavBarCollapseShow;
        this.settingService.siteNavBarCollapseShowEvent.subscribe(value => {
            this.siteNavBarCollapseShow = value;
        });

        this.deviceWidthType = this.settingService.deviceWidthType;
        this.settingService.deviceWidthTypeEvent.subscribe(value => {
            this.deviceWidthType = value;
        });

        this.siteNavBarBgColor = this.settingService.siteNavBarBgColor;
        this.settingService.siteNavBarBgColorEvent.subscribe(value => {
            this.siteNavBarBgColor = value;
            this.classNames = [value];
            if (this.siteNavBarColumnDisplayBgColor) {
                this.classNames.push('navbar-inverse');
            }
        });

        this.siteNavBarColumnDisplayBgColor = this.settingService.siteNavBarColumnDisplayBgColor;
        this.settingService.siteNavBarColumnDisplayBgColorEvent.subscribe(value => {
            this.siteNavBarColumnDisplayBgColor = value;
            this.classNames = [this.siteNavBarBgColor];
            if (this.siteNavBarColumnDisplayBgColor) {
                this.classNames.push('navbar-inverse');
            }
        });
        this.classNames = [this.siteNavBarBgColor];
        if (this.siteNavBarColumnDisplayBgColor) {
            this.classNames.push('navbar-inverse');
        }
        this.settingService.pushHandler(this.resize.bind(this))
    }

    resize() {
        let currentWidth = 0;
        let canUseWidth = this.element.find('.navList').parents('.navbar-collapse').width();
        if (this.deviceWidthType == 'xs') {
            canUseWidth = canUseWidth - 300;
        } else {
            canUseWidth = canUseWidth - 600;
        }
        let menuItemShowNumber = 0;
        for (let i = 0; i < this.$navList.length - 1; i++) {
            const item = this.$navList.eq(i);
            const menuItem = this.$menuNavList.eq(i);
            if (currentWidth >= canUseWidth) {
                item.css('display', 'none');
                menuItem.css('display', 'block');
                menuItemShowNumber++;
            } else {
                item.css('display', 'block');
                menuItem.css('display', 'none');
                currentWidth += item.width();
            }
        }
        this.dropdown && this.dropdown.css('display', !!menuItemShowNumber ? 'block' : 'none')
    }

    ngOnInit(): void {
        setTimeout(() => {
            this.$navList = this.element.find('.navList>li');
            this.$menuNavList = this.element.find('.dropdown-menu>li');
            this.dropdown = this.element.find('.dropdown');
            this.resize();
        }, 200)
    }

    toggleMenuBar() {
        this.settingService.toggleMenuBar();
    }

    toggleNavBar() {
        this.settingService.toggleSiteNavBarCollapse();
    }

    getUrl(data, withParams = false) {
        let url = "/" + data.name.replace(/\./g, '/');
        if (withParams) {
            data.params.forEach(item => {
                url += ('/' + item.value)
            });
        }
        return url
    }

    fullScreen() {
        const doc = document.documentElement;
        if (!this.fullEv) {
            if (doc.requestFullscreen) {
                doc.requestFullscreen();
            } else if (doc.msRequestFullscreen) {
                doc.msRequestFullscreen();
            } else if (doc.mozRequestFullScreen) {
                doc.mozRequestFullScreen();
            } else if (doc.webkitRequestFullScreen) {
                doc.webkitRequestFullScreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }
        this.fullEv = !this.fullEv;
    }

    exit() {
        this.utilService.exitLogin();
    }
}