import { Component, OnInit, Inject } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, RouterLinkActive} from '@angular/router';    
declare var jquery:any;
declare var $ :any

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent implements OnInit {
  linkText: boolean = false;
  sideMenu: any;
  selectedMenu: number;
  public isActive = false;
  public show = true;
  public currenturl;
  @Inject(RouterLinkActive) private active: RouterLinkActive;
  constructor(private router: Router, private activatedRoute:ActivatedRoute) {
    console.log('+++++++++++++++++++++++++++',activatedRoute.snapshot)  // array of states
    // console.log(activatedRoute.snapshot.url[0].path) 
 }
  ngOnInit() {
    
    this.sideMenu = [
      { id: 1,menu: 'Dashboard', isClicked: false, avatatr: 'assets/images/crmxxx_side_dashboard_norm.png',link: '',selectedAvatar:'assets/images/crmxxx_side_dashboard_active.png' },
      { id: 2,menu: 'Stakeholder access', isClicked: false, avatatr: 'assets/images/crmxxx_side_staffaccessmgmt_norm.png', link: '/Dashboard/Organisation',selectedAvatar:'assets/images/crmxxx_side_staffaccessmgmt_active.png' },
      { id: 3,menu: 'Contacts CRM', isClicked: false, avatatr: 'assets/images/crmxxx_side_crm_norm.png',link: '/Contacts',selectedAvatar:'assets/images/crmxxx_side_crm_active.png' },
      { id: 4,menu: 'Data/Info collection', isClicked: false, avatatr: 'assets/images/crmxxx_side_datainfo_norm.png',link: '/DataInfoCollection',selectedAvatar:'assets/images/crmxxx_side_datainfo_active.png'  },
      { id: 5,menu: 'Contracts/Digital signature', isClicked: false, avatatr: 'assets/images/admin_side_menu_esign_icon_norm.png',link: '/Contacts',selectedAvatar:'assets/images/admin_side_menu_esign_icon_active.png' },
      { id: 6,menu: 'Expertise management', isClicked: false, avatatr: 'assets/images/crmxxx_side_expertential_norm.png',link: '/ExpertiseManagement',selectedAvatar:'assets/images/crmxxx_side_expertential_active.png'},
      { id: 7,menu: 'e-Marketing', isClicked: false, avatatr: 'assets/images/crmxxx_side_emarketing_norm.png',link: '/e-Marketing',selectedAvatar:'assets/images/crmxxx_side_emarketing_active.png'  },
      { id: 8,menu: 'Website builder', isClicked: false, avatatr: 'assets/images/crmxxx_side_webbuilder_norm.png',link: '/WebsiteBuilder',selectedAvatar:'assets/images/crmxxx_side_webbuilder_active.png'  },
      { id: 9,menu: 'e-Commerce', isClicked: false, avatatr: 'assets/images/crmxxx_side_ecommerce_norm.png',link: '/e-Commerce',selectedAvatar:'assets/images/crmxxx_side_ecommerce_active.png'  },
      { id: 10,menu: 'Design/Publishing', isClicked: false, avatatr: 'assets/images/admin_side_menu_graphics_icon_norm.png',link: '/e-Commerce',selectedAvatar:'assets/images/admin_side_menu_graphics_icon_active.png'  },
      { id: 11,menu: 'Flowchart', isClicked: false, avatatr: 'assets/images/crmxxx_side_flowchart_norm.png',link: '/Flowchart',selectedAvatar:'assets/images/crmxxx_side_flowchart_active.png'  },
      { id: 12,menu: 'Proposal/Time/Billing', isClicked: false, avatatr: 'assets/images/crmxxx_side_billing_norm.png',link: '/Billing',selectedAvatar:'assets/images/crmxxx_side_billing_active.png'  },
      { id: 13,menu: 'Project management', isClicked: false, avatatr: 'assets/images/crmxxx_side_projectmgmt_norm.png',link: '/ProjectManagement',selectedAvatar:'assets/images/crmxxx_side_projectmgmt_active.png'  },
      { id: 14,menu: 'Messaging', isClicked: false, avatatr: 'assets/images/crmxxx_side_messaging_norm.png',link: '/Messaging',selectedAvatar:'assets/images/crmxxx_side_messaging_active.png'  },
      { id: 15,menu: 'Forums', isClicked: false, avatatr: 'assets/images/crmxxx_side_forums_norm.png',link: '/Forums',selectedAvatar:'assets/images/crmxxx_side_forums_active.png'  },
      { id: 16,menu: 'Affliates', isClicked: false, avatatr: 'assets/images/crmxxx_side_affiliates_norm.png',link: '/Affliates',selectedAvatar:'assets/images/crmxxx_side_affiliates_active.png'  },
      { id: 17,menu: 'Customer service', isClicked: false, avatatr: 'assets/images/crmxxx_side_customerservice_norm.png',link: '/CustomerService',selectedAvatar:'assets/images/crmxxx_side_customerservice_active.png'  },
      { id: 18,menu: 'On-screen training', isClicked: false, avatatr: 'assets/images/crmxxx_side_onscreentraining_norm.png',link: '/On-screenTraining',selectedAvatar:'assets/images/crmxxx_side_onscreentraining_active.png'  },
      { id: 19,menu: 'Automation', isClicked: false, avatatr: 'assets/images/crmxxx_side_automation_norm.png',link: '/Automation',selectedAvatar:'assets/images/crmxxx_side_automation_active.png' },
      { id: 20, menu: 'Analytics', isClicked: false, avatatr: 'assets/images/crmxxx_side_analytics_norm.png',link: '/Analytics',selectedAvatar:'assets/images/crmxxx_side_analytics_active.png'  },
      { id: 21, menu: 'Accounting', isClicked: false, avatatr: 'assets/images/admin_side_menu_accounting_icon_norm.png',link: '/Analytics',selectedAvatar:'assets/images/admin_side_menu_accounting_icon_active.png'  },
    ];
    this.router.events.subscribe((e) => {
      
      if (e instanceof NavigationEnd) {
       this.currenturl = e.url;
       console.log('************',e)
        this.selectedMenu =this.sideMenu.find(x=>x.link==this.currenturl)? this.sideMenu.find(x=>x.link==this.currenturl).id:0;
       console.log('************',this.selectedMenu)
      }
    });
    // if(this.sideMenu.id == this.currenturl){
    //   return this.selectedMenu;
    // }
    
    this.selectedMenu = this.currenturl;

  }
  onSinenavToggle(event) {
    this.linkText = true;
    $(".page-wrapper").removeClass("toggled");
    $(".navbar-nav").removeClass("ml260");
    $(".card").removeClass("width1785");
  }
  onSineiconToggle(event) {
    this.linkText = false;
    $(".page-wrapper").addClass("toggled");
    $(".navbar-nav").addClass("ml260");
    $(".card").removeClass("width1785");
  }
  getSeletedMenu(item, event) {
    this.selectedMenu = item.id;
  }
  ngAfterViewInit() {
    this.updateActiveState();
  }

  private updateActiveState(): void {

    // reset previous state
    this.isActive = false;
  }

  public setActive() {
    this.isActive = true;
  }

  onHover(){
    this.show = false;
    // $(".sidebar-wrapper").removeClass("widthAuto");
    $(".sidebar-search").addClass("group1");
  }

  onleave(){
    this.show = true;
    // $(".sidebar-wrapper").addClass("widthAuto");
    $(".sidebar-search").removeClass("group1");
  }
}