import { Component, OnInit, Injector, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
declare var $: any;

import { MenuService } from '../../core/menu/menu.service';
import { SettingsService } from '../../core/settings/settings.service';
import {InjectorInstance} from '../../app.module';

@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit, OnDestroy {

    menuItems: Array<any>;
    levelTwomenuItems: Array<any>;
    levelOnemenuItems: Array<any>;

    router: Router;
    sbclickEvent = 'click.sidebar-toggle';
    $doc: any = null;

 

    constructor(public menu: MenuService, public settings: SettingsService, public injector: Injector) {
        this.menuItems = menu.getMenu();
        this.levelTwomenuItems = menu.getLevelTwoMenu();
        this.levelOnemenuItems = menu.getLevelOneMenu();
    }

    ngOnInit() {

        this.router = this.injector.get(Router);
        this.router.events.subscribe((val) => {
            // close any submenu opened when route changes
            this.removeFloatingNav();
            // scroll view to top
            window.scrollTo(0, 0);
            // close sidebar on route change
            this.settings.setLayoutSetting('asideToggled', false);
        });

        // enable sidebar autoclose from extenal clicks
        this.anyClickClose();

    }

    anyClickClose() {
        this.$doc = $(document).on(this.sbclickEvent, (e) => {
            if (!$(e.target).parents('.aside-container').length) {
                this.settings.setLayoutSetting('asideToggled', false);
            }
        });
    }

    ngOnDestroy() {
        if (this.$doc)
            this.$doc.off(this.sbclickEvent);
    }

    // 点击顶级菜单，是否折叠，以后处理
    toggleHeadingmenuClick(event) {
      event.preventDefault();
      // let target = $(event.target || event.srcElement || event.currentTarget).parent().parent().nextAll('.nav-subitem-level1');
      // console.log(target);
    }

    openWin(url){
        window.open(url);
    }

    toggleSubmenuClick(event,index) {
     

        event.preventDefault();

        if (!this.isSidebarCollapsed() && !this.isSidebarCollapsedText() && !this.isEnabledHover()) {
            let target = $(event.target || event.srcElement || event.currentTarget);
            
            let ul, anchor = target;
            // find the UL
            if (!target.is('a')) {
                anchor = target.parent('a').first();
            }
            ul = anchor.next();
            // hide other submenus
            let parentNav = ul.parents('.sidebar-subnav');
            $('.sidebar-subnav').each((idx, el) => {
                let $el = $(el);
                // if element is not a parent or self ul
                if (!$el.is(parentNav) && !$el.is(ul)) {
                    this.closeMenu($el);
                }
            });

            // abort if not UL to process
            if (!ul.length) {
                return;
            }

           
            $(document).find('.icon-arrow-up').each((idx, el) => {
               
                let $el = $(el);
                $el.removeClass('icon-arrow-up');
                $el.addClass('icon-arrow-down');
            });
            
            

            // any child menu should start closed
            ul.find('.sidebar-subnav').each((idx, el) => {
                this.closeMenu($(el));
            });

            // toggle UL height
            if (parseInt(ul.height(), 0)) {
                this.closeMenu(ul);

                let i = anchor.children('i');
                $(i).removeClass('icon-arrow-up');
                $(i).addClass('icon-arrow-down');
                
            }
            else {
                // expand menu
                ul.on('transitionend', () => {
                    ul.height('auto').off('transitionend');
                }).height(ul[0].scrollHeight);
                // add class to manage animation
                ul.addClass('opening');

                let i = anchor.children('i');
                $(i).removeClass('icon-arrow-down');
                $(i).addClass('icon-arrow-up');
            }

           // $('.open-li').each((idx, el) => {
            //    let $el = $(el);
           //     $el.parent('li').removeClass('open-li');
           // });

          //  target.parent('li').addClass('open-li');
        }
    }

    changeClass(event,index){
        
        let target = $(event.target || event.srcElement || event.currentTarget);

        let ul,li, anchor = target;
        // find the UL
        if (!target.is('a')) {
            anchor = target.parent('a');
            li = anchor.parent('li');
        }else{
            li = target.parent('li');
        }

        //ul = li.parent('ul');
       

        // abort if not UL to process
       // if (!ul.length) {
       //     return;
      //  }

        // 
        $(document).find('.open-li').each((idx, el) => {
            let $el = $(el);
            $el.removeClass('open-li');
            $el.css('background','#1479cc');
            $el.css('color','hsla(0,0%,100%,.65)');
            //$(target).css('color','hsla(0,0%,100%,.65);');
        });

        $(document).find('.span-class').each((idx, el) => {
            let $el = $(el);
            //$el.css('color','hsla(0,0%,100%,.65)'); 
            $el.removeClass('span-class-active');
            $el.addClass('span-class-cancel');
        });

     
        $(li).addClass('open-li');
        $(li).css('background','#07508c');
        $(li).css('color','#fff');
        //$(target).css('color','#fff');

        $(anchor).find('.span-class').each((idx, el) => {
            let $el = $(el);
            //$el.css('color','#fff'); 
            $el.removeClass('span-class-cancel');
            $el.addClass('span-class-active');
        });

       

        //$('.open-li').each((idx, el) => {
         //   let $el = $(el);
            //$el.parent('li').removeClass('open-li');
          //  $el.parent('li').css('background','#1479cc');
         //   $el.parent('li').css('color','hsla(0,0%,100%,.65)');

         
       // });

        //target.parent('li').addClass('open-li');
        
        
       // target.parent('li').css('background','#07508c');
       // target.parent('li').css('color','#fff');
      
    }

    changeAClass(event,index){

        let target = $(event.target || event.srcElement || event.currentTarget);

        let ul,li, anchor = target;
        // find the UL
        if (!target.is('a')) {
            anchor = target.parent('a');
            li = anchor.parent('li');
        }else{
            li = target.parent('li');
        }

     
        $(document).find('.open-li').each((idx, el) => {
            let $el = $(el);
            $el.removeClass('open-li');
            $el.css('background','#1479cc');
            $el.css('color','hsla(0,0%,100%,.65)');
           //$(target).css('color','hsla(0,0%,100%,.65);');
        });

        $(document).find('.span-class').each((idx, el) => {
            let $el = $(el);
            //$el.css('color','hsla(0,0%,100%,.65)'); 
            $el.removeClass('span-class-active');
            $el.addClass('span-class-cancel');
        });
        

        $(li).addClass('open-li');
        $(li).css('background','#07508c');
        $(li).css('color','#fff');
        $(anchor).css('color','#fff');
        $(anchor).css('background','#07508c');
        $(anchor).addClass('open-li');

        $(anchor).find('.span-class').each((idx, el) => {
            let $el = $(el);
           // $el.css('color','#fff'); 
           $el.removeClass('span-class-cancel');
           $el.addClass('span-class-active');
           
        });


        $(document).find('.icon-arrow-up').each((idx, el) => {
               
            let $el = $(el);
            $el.removeClass('icon-arrow-up');
            $el.addClass('icon-arrow-down');
        });
        
      
    }

    // Close menu collapsing height
    closeMenu(elem) {
        elem.height(elem[0].scrollHeight); // set height
        elem.height(0); // and move to zero to collapse
        elem.removeClass('opening');
    }

    toggleSubmenuHover(event) {
        let self = this;
        if (this.isSidebarCollapsed() || this.isSidebarCollapsedText() || this.isEnabledHover()) {
            event.preventDefault();
            this.removeFloatingNav();
            let target = $(event.target || event.srcElement || event.currentTarget);
            let ul, anchor = target;
            // find the UL
            if (!target.is('a')) {
                anchor = target.parent('a');
            }
            ul = anchor.next();

            if (!ul.length) {
                return; // if not submenu return
            }

            let $aside = $('.aside-container');
            let $asideInner = $aside.children('.aside-inner'); // for top offset calculation
            let $sidebar = $asideInner.children('.sidebar');
            let mar = parseInt($asideInner.css('padding-top'), 0) + parseInt($aside.css('padding-top'), 0);
            let itemTop = ((anchor.parent().position().top) + mar) - $sidebar.scrollTop();

            let floatingNav = ul.clone().appendTo($aside);
            let vwHeight = $(window).height();

            // let itemTop = anchor.position().top || anchor.offset().top;

            floatingNav
                .removeClass('opening') // necesary for demo if switched between normal//collapsed mode
                .addClass('nav-floating')
                .css({
                    position: this.settings.getLayoutSetting('isFixed') ? 'fixed' : 'absolute',
                    top: itemTop,
                    bottom: (floatingNav.outerHeight(true) + itemTop > vwHeight) ? 0 : 'auto'
                });

            floatingNav
                .on('mouseleave', () => { floatingNav.remove(); })
                .find('a').on('click', function(e) {
                    e.preventDefault(); // prevents page reload on click
                    // get the exact route path to navigate
                    let routeTo = $(this).attr('route');
                    if (routeTo) self.router.navigate([routeTo]);
                });

            this.listenForExternalClicks();

        }

    }

    listenForExternalClicks() {
        let $doc = $(document).on('click.sidebar', (e) => {
            if (!$(e.target).parents('.aside-container').length) {
                this.removeFloatingNav();
                $doc.off('click.sidebar');
            }
        });
    }

    removeFloatingNav() {
        $('.nav-floating').remove();
    }

    isSidebarCollapsed() {
        return this.settings.getLayoutSetting('isCollapsed');
    }
    isSidebarCollapsedText() {
        return this.settings.getLayoutSetting('isCollapsedText');
    }
    isEnabledHover() {
        return this.settings.getLayoutSetting('asideHover');
    }

    reloadMenu(){
        
        const mService =  InjectorInstance.get<MenuService>(MenuService);

        this.levelTwomenuItems = mService.getLevelTwoMenu();
    }
}
