import { Component, Input, AfterViewInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { RdLib } from '../../../base/rdLib';
import { AppComponent } from '../../../app.component';
import { RdComponent } from '../../../base/rdComponent';
import { SidebarItemType } from '../../../base/rdModule';

declare const mLayout;

@Component({
  selector: "[rd-sidebar-item]",
  template: `
    <a [routerLink]="[ '/' + item?.page?.path]" class="m-menu__link" *ngIf="item.type == SidebarItemType.Url">
      <i class="m-menu__link-icon" [ngClass]="item.icon"></i>
      <span class="m-menu__link-text">{{item.translatedText}}</span>
    </a>

    <a href="javascript:;" class="m-menu__link m-menu__toggle" *ngIf="item.type == SidebarItemType.Container">
      <i class="m-menu__link-icon" [ngClass]="item.icon"></i>
      <span class="m-menu__link-text">{{item.translatedText}}</span>
      <i class="m-menu__ver-arrow la la-angle-right"></i>
    </a>
    <div class="m-menu__submenu" *ngIf="item.type == SidebarItemType.Container">
      <span class="m-menu__arrow"></span>
      <ul class="m-menu__subnav">
        <li class="m-menu__item" *ngFor="let subItem of item.subItems" rd-sidebar-item [item]="subItem"
          [ngClass]="{'m-menu__item--active': subItem.active,'m-menu__item--open': subItem.active,'m-menu__item--submenu': subItem.type == SidebarItemType.Container}"
          routerLinkActive="m-menu__item--active" aria-haspopup="true">
        </li>
      </ul>
    </div>
  `
})
export class SidebarItem extends RdComponent {
  @Input('item') item;
  SidebarItemType = SidebarItemType;
}

@Component({
  selector: "rd-frame-sidebar",
  template: `
    <button class="m-aside-left-close m-aside-left-close--skin-dark" id="m_aside_left_close_btn" appunwraptag>
      <i class="la la-close"></i>
    </button>
    <div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark" [hidden]="app?.instance?.isPageNotFound">
      <div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" m-menu-vertical="1"
        m-menu-scrollable="1" m-menu-dropdown-timeout="200" style="position: relative">
        <ul id="m_nav" class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow">

          <li class="m-menu__item m-menu__item--open" *ngFor="let subItem of items;" rd-sidebar-item [item]="subItem"
            [ngClass]="{'m-menu__item--submenu': subItem.type == SidebarItemType.Container,'m-menu__item--active': subItem.active}"
            [attr.m-menu-submenu-toggle]="subItem.type == SidebarItemType.Container ? 'hover' : ''"
            routerLinkActive="m-menu__item--active" aria-haspopup="true">
          </li>

        </ul>
      </div>
    </div>
  `
})
export class Sidebar extends RdComponent implements AfterViewInit {
  app = AppComponent;
  SidebarItemType = SidebarItemType;
  items;

  ngAfterViewInit() {
    mLayout.initAside();
  }

  protected updateSidebarDefinitions(sidebarDefinitions, activePage) {
    var hasActiveChild = false;
    for (var i of sidebarDefinitions) {
      var active = false;
      if (i.type == SidebarItemType.Url && i.page && i.page.path == activePage) active = true;
      if (i.type == SidebarItemType.Container && this.updateSidebarDefinitions(i.subItems, activePage)) active = true;
      i.active = active;
      if (active) hasActiveChild = true;
    }
    return hasActiveChild;
  };

  protected updateSidebarTranslations(sidebarDefinitions) {
    for (var i of sidebarDefinitions) {
      if (!i.text) continue;
      i.translatedText = this.translate(i.text);
      if (i.type == SidebarItemType.Container) this.updateSidebarTranslations(i.subItems);
    }
  }

  setDynamicSidebar(sidebar) {
    setTimeout(function () {
      this.items[0].subItems = RdLib.objectOperations.deepCopy(sidebar);
      this.items[0].active = true;
      this.updateSidebarTranslations(this.items);
    }.bind(this));
  }

  constructor(router: Router) {
    super();
    this.items = [];
    this.items = RdLib.objectOperations.deepCopy(AppComponent.client.getSidebar());
    this.updateSidebarTranslations(this.items);

    router.events.subscribe((navigate) => {
      if (navigate instanceof NavigationEnd) {
        let activePage = navigate["url"].replace("/", "");
        this.updateSidebarDefinitions(this.items, activePage);
      }
    });
  }
}