import { Component, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../../base/rdComponent';
import { AppComponent } from '../../../app.component';

declare const mLayout;

@Component({
  selector: "rd-frame-topbar",
  template: `
    <header id="m_header" class="m-grid__item m-header" m-minimize-offset="200" m-minimize-mobile-offset="200">
      <div class="m-container m-container--fluid m-container--full-height">
        <div class="m-stack m-stack--ver m-stack--desktop">
          <div class="m-stack__item m-brand  m-brand--skin-dark">
            <div class="m-stack m-stack--ver m-stack--general">
              <div class="m-stack__item m-stack__item--middle m-brand__logo">
                <a routerLink="/home" class="m-brand__logo-wrapper">
                  <img alt="logo" class="logo-default" style="height:40px;margin:0" src="assets/custom/edas_logo.png" />
                </a>
              </div>
              <div class="m-stack__item m-stack__item--middle m-brand__tools">
                <a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
                  <span></span>
                </a>
                <a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
                  <span></span>
                </a>
                <a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
                  <i class="flaticon-more"></i>
                </a>
              </div>
            </div>
          </div>
          <div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
            <button class="m-aside-header-menu-mobile-close  m-aside-header-menu-mobile-close--skin-dark" id="m_aside_header_menu_mobile_close_btn">
              <i class="la la-close"></i>
            </button>				
            <div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general m-stack--fluid">
              <div class="m-stack__item m-topbar__nav-wrapper">
                <ul class="m-topbar__nav m-nav m-nav--inline">
                  <ng-container *ngFor="let item of items">
                    <rd-dynamic-component-loader [rd-page-type]="item"></rd-dynamic-component-loader>
                  </ng-container>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  `
})
export class Topbar extends RdComponent implements AfterViewInit{
  items = [];

  constructor() {
    super();
    this.items = AppComponent.client.getTopbarItems();
  }

  ngAfterViewInit() {
    mLayout.initHeader();
  }
}