import { Component, Input, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { MenuItem } from 'primeng/primeng';
import { AppComponent } from 'app/app.component';
import { PagesComponent } from '../../../../pages/pages.component';

@Component({
    selector: 'of-menu',
    templateUrl: './app.menu.component.html'
})

export class AppMenuComponent implements OnInit {

    @Input() reset: boolean;

    model: any[];

    constructor(public app: PagesComponent) { }

    ngOnInit() {
        this.model = [
            { label: 'Home', icon: 'home', routerLink: ['/'] },
            {
                label: 'Infra', icon: 'all_inclusive', items: [
                    { label: 'Map', icon: 'map', routerLink: ['/map'] },
                    { label: 'Sensors', icon: 'compare_arrows', routerLink: ['/sensors'] },
                    { label: 'Probes', icon: 'dock', routerLink: ['/probes'] },
                ]
            },
            {
                label: 'Monitor', icon: 'remove_red_eye', items: [
                    { label: 'Overview', icon: 'rate_review', routerLink: ['/overview'] },
                    { label: 'Dashboards', icon: 'dashboard', routerLink: ['/dashboard'] },
                ]
            },
            { label: 'Alert', icon: 'warning', routerLink: ['/alert'] },
            { label: 'Report', icon: 'print', routerLink: ['/report'] },
            { label: 'Log', icon: 'history', routerLink: ['/log'] },
        ];
    }

    changeTheme(theme) {
        const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('theme-css');
        const layoutLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById('layout-css');

        themeLink.href = 'assets/theme/theme-' + theme + '.css';
        layoutLink.href = 'assets/layout/css/layout-' + theme + '.css';
    }
}