import {Component} from '@angular/core';
import {Router} from '@angular/router';
import {MenuItem} from '@vendasta/fec-menu';

declare var templateData: any;

// enableProdMode();

@Component({
  selector: 'app',
  template: `
      <va-navigation
              [partnerLogoUrl]="partnerLogoUrl"
              [productName]="'FrontEnd Center'"
              [partnerName]="partnerName"
              [menuItems]="menuItems"
              [activeMenuId]="activeMenuId"
              [userOptions]="userOptions"
              [ngClass]="navTheme"
              (menuItemClickEvent)="onMenuItemClick($event);">
          <div body class="page-container">
              <router-outlet></router-outlet>
          </div>
      </va-navigation>`,
  styles: [`
      .page-container {
          max-width: 1400px;
          min-height: 100vh;
          padding: 20px;
          margin: 0;
          overflow: hidden;
          flex: 1;
      }
  `]
})

export class AppComponent {
  activeMenuId: string = templateData.activeMenuId;
  menuItems: MenuItem[] = templateData.navItems;
  userOptions: MenuItem[] = templateData.userOptions;
  partnerName: string = templateData.partnerName;
  navTheme: string = templateData.navTheme;
  partnerLogoUrl: string = require('./assets/vendasta-logo-large.png');

  constructor(private router: Router) {
  }

  onMenuItemClick($event: any): void {
    if ($event[0].value !== 'setup-doc') {
      this.router.navigateByUrl($event[0].value + '/');
    }
    else {
      this.router.navigateByUrl(`/`);
    }
  }
}