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

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


@Component({
	selector: 'search',
	templateUrl: 'tpl.search.pug',
	styleUrls: ['sty.search.scss']
})
export class SearchView implements OnInit {

	// Variables ----
	@Input('type') type: string
	state: boolean = false
	menuState: boolean = false
	isNotDisplayed: boolean = true

	constructor(
		private _menuService : MenuService,
		private _searchService : SearchService,
		private _helper: HelperService
	) {
		// Set menu cover state
		_menuService.state$.subscribe((result) => {
			this.menuState = result;
		})

		// Set search cover state
		_searchService.state$.subscribe((result) => {
			this.state = result;

			if(result && this.type === 'cover') {
				this._helper.addClass(document.querySelector('html'), 'is-locked');
			}
			else {
				this._helper.removeClass(document.querySelector('html'), 'is-locked');
			}
		})
	}


	// Lifecycle hooks ----
	ngOnInit() { 
		setTimeout(() => {
			this.isNotDisplayed = !this.isNotDisplayed
		}, 500)
	}


	// Functions ----

	/**
	 * Close current overlay
	 */
	closeSearch() {
		this._searchService.toggleSearchState(false)
	}

	
	/**
	 * Closes search overlay and menu
	 */
	closeAll() {
		if(this.menuState) {
			this._menuService.toggleState(false)
		}
		this.closeSearch()
	}

	/**
	 * Close current overlay and 
	 * open menu overlay if not open already
	 */
	back() {
		if(!this.menuState) {
			this._menuService.toggleState(true)
		}

		this.closeSearch()
	}

}