import { Component, OnInit } from '@angular/core'
import { Router }            from '@angular/router'

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

// Services
import { MenuService }      from '@k-services/svc.menu'
import { HelperService }    from '@k-services/svc.helper'
import { TransferState, makeStateKey } from '@angular/platform-browser'

const OFFCANVASMENU_KEY = makeStateKey('offcanvasmenukey')
const secondaryMenuKey = makeStateKey('SECONDARYMENUKEY')

@Component({
	moduleId: module.id+'',
	selector: 'menu-offcanvas',
	templateUrl: 'tpl.menu-offcanvas.pug',
	styleUrls: ['sty.menu-offcanvas.scss']
})
export class MenuOffCanvasComponent implements OnInit {


	// ---- Variables ---- \\
	menuName 			= 'primary-' + store
	secondaryMenuName 	= 'secondary-' + store
	navigation          = []
	categories          = []
	categoryLabel       = this._helper.categories
	atLevel             = 0
	atLevelLabel        = 'at-level-'
	atLevelClass        = this.atLevelLabel + this.atLevel
	secondaryNav
	childNavOpen;
	headerLabel;


	menuState: boolean = false; 
	childMenuState = {}


	constructor(
		private _menuService: MenuService,
		private _helper: HelperService,
		private router: Router,
		private state: TransferState
	) {
		
		// Subscribe to menu state
		_menuService.state$.subscribe((state) => {

			this.menuState = state

		})

	}



	// ---- Lifecycle Events ---- \\
	ngOnInit() {

		this.getPrimaryMenu()
		this.getSecondaryMenu()
		

		/**
		 * Get categories and sort alphabetically
		 */
		// this._menuService.getMenuCategories().then(result => {
		// 	this.categories = result.sort(function(a,b){
		// 		return a.name.localeCompare(b.name);
		// 	});
		// })
	}



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

	/**
	 * Will get the primary menu. Uses state menu if it exists
	 */
	getPrimaryMenu() {
		this.navigation = this.state.get(OFFCANVASMENU_KEY, null as any)


		if(!this.navigation || this.navigation.length <= 0) {
			
			this._menuService.getMenu(this.menuName).then((result) => {

				if(result) {
					this.navigation = result
					this.state.set(OFFCANVASMENU_KEY, result as any)
				}
			})
			
		}
	}

	
	/**
	 * Will get the secondary menu. Uses state menu if it exists
	 */
	getSecondaryMenu() {
		this.secondaryNav = this.state.get(secondaryMenuKey, null as any)

		if(!this.secondaryNav || this.secondaryNav.length <= 0) {

			this._menuService.getMenu(this.secondaryMenuName).then((result: any) => {
				
				this.secondaryNav = result

				this.state.set(secondaryMenuKey, result as any)
			})
		}
	}


	/**
	 * Toggle state of child menu to show/hide menu
	 * 
	 * @param id 
	 */
	toggleChildMenu(id) {
		const currentState = this.childMenuState[id]

		this.childMenuState[id] = !currentState
	}

	
	closeChild() {
		this.childNavOpen = false;
		this.atLevel--;
		this.atLevelClass = this.atLevelLabel + this.atLevel;
		this.headerLabel = '';
	}

	openChild(label, id) {
		this.childNavOpen = id;
		this.atLevel++;
		this.atLevelClass = this.atLevelLabel + this.atLevel;
		this.headerLabel = label;
	}

	/**
	 * Closes offcanvas menu
	 */
	closeOffcanvas() {
		this._menuService.close();
	}

	searchFor(term: HTMLInputElement) {
		this.closeOffcanvas()
		this.router.navigate(['/search/'+term.value]);

		term.value = '';
	}
}