import { Component, ElementRef, ViewChild, Injectable, OnInit, ChangeDetectorRef } from "@angular/core";
import { View } from "ui/core/view";
import { RadSideDrawer } from "nativescript-telerik-ui/sidedrawer";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import sideDrawerModule = require('nativescript-telerik-ui/sidedrawer');
import { Observable } from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import { TNSFontIconService } from 'nativescript-ng2-fonticon';

import { MenuItem } from "./shared/menu/menu-item";

@Component({
    selector: "main",
    templateUrl: "./app.html",
    styleUrls: ['app.css']
})
export class AppComponent extends Observable implements OnInit {
    private menuItems: Array<MenuItem>;
    private appName: String;

    constructor(private page: Page, private _changeDetectionRef: ChangeDetectorRef, private fonticon: TNSFontIconService) {
        super();
    }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this.drawer.showOverNavigation = true;
        this.drawer.drawerLocation = sideDrawerModule.SideDrawerLocation.Right;
        this.drawer.gesturesEnabled = false;
        this._changeDetectionRef.detectChanges();
    }

    ngOnInit() {
        this.menuItems = new Array<MenuItem>();
        
        ##MENU-ITEMS##

        this.appName = "##APPNAME##";

        console.log('page loaded.');
    }

    public openDrawer() {
        this.drawer.showDrawer();
    }

    public toggleDrawer() {
        this.drawer.toggleDrawerState();
    }
}