/**
 * @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'
import { UserService } from '@k-core/modules/User/services/svc.user'

const INLINEPRIMARYMENU_KEY = makeStateKey('inlineprimarymenukey')


enum SecondaryMenuTypesEnum {
	inline,
	dropdown
}

@Component({
	selector: 'menu-inline-primary',
	templateUrl: 'page/p--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,
		private user: UserService
	) {	
		// Subscribe to active primary
		_menuService.activePrimary$.subscribe((result) => {
			this.activePrimary = result
		})
	}



	// ---- Variables ---- \\
	private menuName:string 	= 'primary-' + store

	public SecondaryMenuTypesEnum = SecondaryMenuTypesEnum
	public secondaryMenuType: SecondaryMenuTypesEnum = SecondaryMenuTypesEnum.dropdown
	public categoryLabel		= AppHelper.categories
	public navigation 			= []
	public categories 			= []
	public activeDropdown: string
	public activePrimary: string






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

	


	
	// ---- 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('')
		}
	}


	/**
	 * Toggles active state of dropdown with given id
	 * 
	 * @param dropdownId string - id of the dropdown we wish to toggle
	 */
	toggleDropdown(dropdownId: string) {
		// Reset active dropdown if same id is given
		if(this.activeDropdown == dropdownId) {
			this.activeDropdown = ''
		}

		// Otherwise set current active dropdown to id
		else {
			this.activeDropdown = dropdownId
		}
	}


	/**
	 * 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)
				}
			})
		}
	}
	

	logout(href) {
		this.user.logoutAsSubscribe().subscribe({
			complete: () => {
				window.location.href = decodeURI(href)
			}
		})
	}
}