import { Observable } from 'rxjs';

import { Component, OnInit, ElementRef } from '@angular/core';
import { ROUTES } from '../sidebar/sidebar.component';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';
//import { AuthenticationService } from 'src/app/services/authentication.service';
import { AdminLayoutRoutes } from 'src/app/layouts/admin/admin.routing';
import { AuthService } from '../../../services/auth2.service';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
    private listTitles: any[];

    private leTitles: any[];

    location: Location;
      mobile_menu_visible: any = 0;
    private toggleButton: any;
    private sidebarVisible: boolean;
    private sidebarMini: boolean;
    constructor(location: Location,  private element: ElementRef, private router: Router, private auth: AuthService, private route: ActivatedRoute) {
      this.location = location;
      this.sidebarVisible = false;
      this.sidebarMini = false;
    }

    ngOnInit(){
      this.listTitles = ROUTES.filter(listTitle => listTitle);
      this.leTitles = AdminLayoutRoutes.filter(listTitle => listTitle);
      const navbar: HTMLElement = this.element.nativeElement;
      this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0];
      this.router.events.subscribe((event) => {
        this.sidebarClose();
         var $layer: any = document.getElementsByClassName('close-layer')[0];
         if ($layer) {
           $layer.remove();
           this.mobile_menu_visible = 0;
         }
     });
    }

    sidebarMiniOn() {
      const toggleButton = this.toggleButton;
      const body = document.getElementsByTagName('body')[0];
      setTimeout(function(){
        toggleButton.classList.add('sidebar-mini');
      }, 500);
      body.classList.add('sidebar-mini');

      this.sidebarMini = true;
    };

    sidebarMiniOff() {
      const body = document.getElementsByTagName('body')[0];
      //this.toggleButton.classList.remove('');
      this.sidebarMini = false;
      body.classList.remove('sidebar-mini');
    };

    menuToggle(){
      const body = document.getElementsByTagName('body')[0];
      //body.classList.add('sidebar-mini');
      if (this.sidebarMini === false) {
          this.sidebarMiniOn();
      } else {
          this.sidebarMiniOff();
      }
    }

    sidebarOpen() {
      const toggleButton = this.toggleButton;
      const body = document.getElementsByTagName('body')[0];
      setTimeout(function(){
        toggleButton.classList.add('toggled');
      }, 500);

      body.classList.add('nav-open');

      this.sidebarVisible = true;
    };
    sidebarClose() {
      const body = document.getElementsByTagName('body')[0];
      this.toggleButton.classList.remove('toggled');
      this.sidebarVisible = false;
      body.classList.remove('nav-open');
    };
    sidebarToggle() {
      // const toggleButton = this.toggleButton;
      // const body = document.getElementsByTagName('body')[0];
      var $toggle = document.getElementsByClassName('navbar-toggler')[0];

      if (this.sidebarVisible === false) {
          this.sidebarOpen();
      } else {
          this.sidebarClose();
      }
      const body = document.getElementsByTagName('body')[0];

      if (this.mobile_menu_visible == 1) {
          // $('html').removeClass('nav-open');
          body.classList.remove('nav-open');
          if ($layer) {
              $layer.remove();
          }
          setTimeout(function() {
              $toggle.classList.remove('toggled');
          }, 400);

          this.mobile_menu_visible = 0;
      } else {
        setTimeout(function() {
            $toggle.classList.add('toggled');
        }, 430);

        var $layer = document.createElement('div');
        $layer.setAttribute('class', 'close-layer');

        if (body.querySelectorAll('.main-panel')) {
          document.getElementsByClassName('main-panel')[0].appendChild($layer);
        }else if (body.classList.contains('off-canvas-sidebar')) {
          document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer);
        }

        setTimeout(function() {
            $layer.classList.add('visible');
        }, 100);

        $layer.onclick = function() { //asign a function
          body.classList.remove('nav-open');
          this.mobile_menu_visible = 0;
          $layer.classList.remove('visible');
          setTimeout(function() {
            $layer.remove();
            $toggle.classList.remove('toggled');
          }, 400);
        }.bind(this);

        body.classList.add('nav-open');
        this.mobile_menu_visible = 1;
      }
    };

    logout() {

      Swal.fire({
        allowOutsideClick: false,
        type: 'info',
        text: 'Espere por favor...'
      });
      Swal.showLoading();

      this.auth.logout();

      //this.router.navigateByUrl("login");
    }

    getTitle(){
      var titlee = this.location.prepareExternalUrl(this.location.path());
      var component_local = this.router.url;
      var main_title:string;

      if(titlee.charAt(0) === '#'){
        titlee = titlee.slice( 1 );
      }
      var item=0
      while( item < this.leTitles.length){
        
        if("/"+this.leTitles[item].path === titlee){
          main_title = this.leTitles[item].data['title'];
          break;
        }
        item++;
      }
      if (main_title === undefined) {
        return 'Dashboard';
      }
      else {
        return main_title;
      }

    }
}