import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';
import { MenubarData } from './menubar-data';
import { MainModuleConfig, } from '../types/modules-types';
import { MenubarDataConfig, MenubarObjects } from '../types/menubar-types';
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';
import { TranslateService } from '../services/translate-service';
import { SUPPORTED_LANGUAGES } from '../translation/translations';
import { CoreRouterPath } from '../utils/core-router-paths';

declare var gnMenu: any;

@Component({
  selector: 'app-menubar',
  templateUrl: './menubar.component.html',
  styleUrls: ['./menubar.component.css'],
})
export class MenubarComponent implements OnInit {
  //#region Varables
  private modules: MenubarDataConfig[];
  private mainModules: MainModuleConfig[];
  private lang;


  private currentModule: MenubarDataConfig;
  private currentObject: MenubarObjects;
  private menuState = false;

  //#endregion

  constructor(private route: ActivatedRoute, private router: Router, private translateService: TranslateService) {


  }
  //get starting module
  getDefaultModule(): MenubarDataConfig {
    return {
      mainModule: { moduleName: 'dashboard', moduleIcon: 'fa fa-tachometer', moduleRoutingPath: CoreRouterPath.DASHBOARD_PATH }, levelOne: [
        {
          name: 'dashboard',
        }]
    };
  }
  ngOnInit() {
    this.mainModules = MenubarData.getMainModules();
    this.currentModule = this.getDefaultModule();

    Mediator.subscribe(CoreMediatorChannels.ON_MAIN_MODULE_START, (data: { selectedModule: MenubarDataConfig, selectedObject: MenubarObjects }) => {
      this.currentModule = data.selectedModule;
      if (data.selectedObject) {
        this.currentObject = data.selectedObject;

      }
      this.lang = this.translateService.instant("lang-key");
    });

    Mediator.subscribe(CoreMediatorChannels.CHANGE_SYSTEM_LANGUAGE, (lang: string) => {
      this.lang = this.translateService.instant("lang-key");
    });

    Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_EDIT_MODE, (lang: string) => {
      if ($('#gn-menu-wrapper').hasClass("gn-open-all")) {
        this.menuState = true;
        $('#gn-menu-wrapper').removeClass("gn-open-all");
        $('#menubar-trigger')[0].click();
      }
      $('#gn-menu-wrapper').css('display', 'none');
    });

    Mediator.subscribe(CoreMediatorChannels.ON_OBJECT_SCREEN_VIEW_MODE, (lang: string) => {
      if (this.menuState) {

        $('#menubar-trigger')[0].click();
        $('#gn-menu-wrapper').addClass("gn-open-all");
      }

      $('#gn-menu-wrapper').css('display', 'block');
      this.menuState = false;
    });

    /** trigger button on menubar when click ( open / close ) menu */
    new gnMenu(document.getElementById('gn-menu'), document.getElementById('headerscreen'));


  }

  setCurrentSubModules(e: Event, currentModule: MainModuleConfig) {
    e.preventDefault();
    this.currentModule = MenubarData.getMenubarDataByModuleName(currentModule.moduleName);
    this.router.navigate([this.currentModule.mainModule.moduleRoutingPath]);
  }

  toggleSubMenus(index, objectName) {
    $('.submenux' + index).slideToggle();

    $('.options-lists-en-' + objectName).toggleClass('fa-angle-right fa-angle-down');
    $('.options-lists-ar-' + objectName).toggleClass('fa-angle-left fa-angle-down');

  }



  navigate(e: Event, path: string) {
    e.preventDefault();
    let link = [];
    link.push(path);
    this.router.navigate(link);
  }

  MenubarToggleClass() {
    if ($("#gn-menu-wrapper").hasClass("gn-open-all")) {
      return "app-menubar-opened";
    }
    else {
      if (this.lang == 'ar') {
        return "app-menubar-closed-ar";
      }
      else if (this.lang == 'en') {
        return "app-menubar-closed-en";
      }

    }
  }
}