import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import {Router} from '@angular/router'
import { MAT_DRAWER_CONTAINER, MatDrawer } from '@angular/material/sidenav/drawer';

@Component({
  selector: 'main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent {

  color: string = ""

  absence = [{ 'name': 'Leave Balance', 'id': 'leaveBalance', 'class':'myDiv', 'link':'absence/leaveBalance'}, { 'name': 'Apply Leave', 'id': 'applyLeave', 'class':'myDiv' , 'link':'absence/applyLeave'}, { 'name': 'Leave History', 'id': 'leaveHistory', 'class':'myDiv' , 'link':'absence/leaveHistory'}, { 'name': 'Cancel Leave', 'id': 'cancelLeave', 'class':'myDiv', 'link':'absence/cancelLeave' }, { 'name': 'Holiday List', 'id': 'holidayList', 'class':'myDiv', 'link':'absence/holidayList' }];
  general = [{'name':'Getting Started With COCO', 'class':'generalDiv', 'link':'/'},{'name':'About COCO', 'class':'generalDiv', 'link':'aboutCoco'},{'name':'Authentication', 'class':'generalDiv', 'link':'authentication'},{'name':'Frequently Asked Questions', 'class':'generalDiv', 'link':'faq'}];
  genies = [{'name':'Create Incident', 'class':'genieDiv', 'link':'askGenie/createIncident'},{'name':'View Incidents', 'class':'genieDiv', 'link':'askGenie/viewIncident'},{'name':'Update Incident', 'class':'genieDiv', 'link':'askGenie/updateIncident'}];
  approvals = [{'name':'Approve Leave', 'class':'approvals', 'link':'approvals/approveLeave'}, {'name':'Approve Exception', 'class':'approvals', 'link':'approvals/approveException'}];
  attendance = [{ 'name': 'Raise Exception', 'link':'attendance/raiseException'}, { 'name': 'View Exception', 'link':'attendance/viewException'}, { 'name': 'Cancel Exception' , 'link':'attendance/cancelException'}];
  crm =[{'name':'Active Pipeline', 'id':'activePipeline','class':'crm', 'link':'crm/activePipeline'}, {'name':'Opportunities Closure', 'id':'opportunitiesClosure','class':'crm', 'link':'crm/opportunitiesClosure'}, {'name':'Awaiting Finance Approval', 'id':'awaitingFinanceApproval','class':'crm', 'link':'crm/awaitingFinanceApproval'}]
  
  opened = false;
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );  

    logEvent(arg){
      console.log(arg);
      console.log(this.isHandset$);
      if(this.isHandset$){
        console.log("true")
      }
    }
    // closeSideNav(){
    //   if(this.isHandset$){
    //     close()
    //   }
    // }
  changebtnNew(arg) {
     console.log(arg)
    var header = document.getElementById('topId');
    var btns = header.getElementsByClassName("default");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        console.log('inside listener')
      var current = document.getElementsByClassName("blue");
      if (current.length > 0) { 
        current[0].className = current[0].className.replace(" blue", "");
      }
      this.className += " blue";
      });
    }    
  }


  constructor(private breakpointObserver: BreakpointObserver, private router: Router) {
    
    // console.log('constructor')
    // var header = ['myDiv', 'approvalDiv', 'peopleSearchDiv','genieDiv','generalDiv'];
    // console.log(header)
    // for (let item of header) {
    //   console.log('inside for')
    //   var header2 = document.getElementById(item.toString())
    //   console.log("header id",header2)
    //   var btns = header2.getElementsByClassName("default");
    // console.log(btns.length)
    // for (var k = 0; k < btns.length; k++) {
    //   btns[k].addEventListener("click", function() {
    //     console.log('inside listener')
    //   var current = document.getElementsByClassName("blue");
    //   if (current.length > 0) { 
    //     current[0].className = current[0].className.replace(" blue", "");
    //   }
    //   this.className += " blue";
    //   });
    // }
    // } 
    
   }

}