/**
 * @since Thu Dec 07 2017
 * @author Charles Gouldmann - Klean
 */


import { Component, OnInit } from '@angular/core'
import { TransferState, makeStateKey } from '@angular/platform-browser'

// Services
import { MenuService }      from '@k-services/svc.menu'
import { HelperService }    from '@k-services/svc.helper'

import { debug }			from '@k-settings/store-helper'
import { AppHelper }		from '@k-settings/app-helper'
import { website, store } 	from '@k-settings/app-setup.js'

const INLINEPRIMARYMENU_KEY = makeStateKey('inlineprimarymenukey')
// const INLINEPRIMARYMENUCATEGORIES_KEY = makeStateKey('inlineprimarymenucategorykey')

@Component({
	selector: 'menu-inline-primary',
	templateUrl: 'tpl.menu-inline-primary.pug',
	styleUrls: ['./sty.menu-inline-primary.scss']
})
export class MenuInlinePrimaryComponent implements OnInit {

	constructor(
		private _menuService: MenuService,
		private _helper: HelperService,
		private state: TransferState
	) {	
		// Subscribe to active primary
		_menuService.activePrimary$.subscribe((result) => {
			this.activePrimary = result
		})
	}



	// ---- Variables ---- \\
	navigation 			= []
	categories 			= []
	categoryLabel		= AppHelper.categories
	activePrimary: string

	menuName 			= 'primary-' + store





	// ---- Lifecycle hooks ---- \\
	ngOnInit() { 
		this.getMenuAndCategories();
		console.log(this.menuName)
	}

	


	
	// ---- Functions ---- \\

	/**
	 * Call menu service close function
	 */
	closeSecondaryMenu() {
		this._menuService.closeSecondary();
	}

	/**
	 * Toggle visible state of secondary
	 * and get the corresponding secondary menu
	 * 
	 * @param type 
	 * @param target 
	 * @param active 
	 */
	toggleSecondaryMenu(type:string, target:number, active: string) {

		// Only close menu when same primary is activated
		if(active == this.activePrimary) {
			this._menuService.closeSecondary();
		}
		else {
			this._menuService.openSecondary();
		}

		// Dont get menu again if same primary is activated
		if(active != this.activePrimary) {
			this._menuService.getSecondaryMenu(type, target, this.menuName);
		}
	}



	/**
	 * Toggle the active value for primary nav items
	 * If same active as current is given, active is set to empty string
	 * @param active 
	 */
	toggleActivePrimary(active:string) {
		if(this.activePrimary !== active) {
			this._menuService.setActivePrimary(active)
		}
		else {
			this._menuService.setActivePrimary('')
		}
	}

	/**
	 * Get the nav items and categories from menuservice
	 */
	getMenuAndCategories() {

		// Set states
		this.navigation = this.state.get(INLINEPRIMARYMENU_KEY, null as any)
		// this.categories = this.state.get(INLINEPRIMARYMENUCATEGORIES_KEY, null as any)
		

		// Make calls if state is false or debug is true
		if(!this.navigation || debug) {
		
			this._menuService.getMenu(this.menuName).then((result) => {
				if(result) {
					this.navigation = result
					this.state.set(INLINEPRIMARYMENU_KEY, result as any)
				}
			});
		}

		
		// if(!this.categories && !debug) {

		// 	// Get categories and sort alphabetically
		// 	this._menuService.getMenuCategories().then(result => {
		// 		this.categories = result
		// 		this.state.set(INLINEPRIMARYMENUCATEGORIES_KEY, result as any)

		// 		// this.categories = result.sort(function(a,b){
		// 		// 	return a.name.localeCompare(b.name);
		// 		// })
		// 	})
		// }

	}

}