import { Component, AfterViewInit, Input, OnInit } from '@angular/core';
import {ApplicationService} from '../services/application.service';

declare var jQuery: any;

@Component({
    selector: 'site-menu',
    template: `
        <div class="ui attached stackable menu">
            <div class="ui container" *ngIf="application.appSettings != null">
                <a class="item" *ngFor="let menuItem of application.getMenuItemsWithNoChildren(application.appSettings.menu.menuItems)" [routerLink]="menuItem.slug"><i class="{{menuItem.icon}} icon"></i>{{menuItem.name}}</a>
                
                <div class="ui simple dropdown item" *ngFor="let menuItem of application.getMenuItemsWithChildren(application.appSettings.menu.menuItems)">
                    {{menuItem.name}}
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" *ngFor="let childMenuItem of application.getMenuItemsWithNoChildren(menuItem.menuItems)" [routerLink]="childMenuItem.slug"><i class="{{childMenuItem.icon}} icon"></i> {{childMenuItem.name}}</a>
                        <div class="ui simple dropdown item" *ngFor="let childMenuItem of application.getMenuItemsWithChildren(menuItem.menuItems)">
                            <i class="{{childMenuItem.icon}} icon"></i> 
                            {{childMenuItem.name}}
                            <div class="menu">
                                <a class="item" *ngFor="let nestedChildMenuItem of application.getMenuItemsWithNoChildren(childMenuItem.menuItems)" [routerLink]="nestedChildMenuItem.slug"><i class="{{nestedChildMenuItem.icon}} icon"></i> {{nestedChildMenuItem.name}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="ui search">
                        <div class="ui icon input">
                            <input class="prompt" placeholder="Customer Mobile or Email..." type="text">
                            <i class="search icon"></i>
                        </div>
                        <div class="results"></div>
                    </div>
                </div>
                <div class="right item" *ngIf="application.currentUser != null">
                    <i class="sign out icon"></i> <a (click)="application.logout()">Sign Out</a>
                </div>
            </div>
        </div>
    `
})
export class SiteMenuComponent implements AfterViewInit {

    @Input('type')
    type: string = 'fixed';

    @Input('hidden')
    hidden: boolean = true;

    constructor(public application: ApplicationService) { }

    hiddenClass(): string {
        if (this.hidden)
            return "hidden";
        else
            "";
    }

    ngAfterViewInit(): void {
        setTimeout(() => this.attachSideBar(), 2000);
    }

    getMenuIconOrText(menuItem: any): string {
        if (menuItem.icon == null)
            return menuItem.name;
        else
            return "<i class='large " + menuItem.icon + " icon'></i>";
    }

    makeActive(index: number): string {
        if (index == 0)
            return "active";
        else
            return "";
    }

    attachSideBar(): void {
        if (jQuery != null) {
            jQuery('.ui.sidebar')
                .sidebar('attach events', '.toc.item');

            jQuery('.ui.dropdown')
                .dropdown();
        }
    }
}