import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { switchMap, take, switchMapTo } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import { Router, ActivatedRoute, NavigationStart, Navigation } from '@angular/router';

@Component({
	selector: 'nav-bar',
	templateUrl: './nav-bar.component.html',
	styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent implements OnInit {

	search : string = '';
	suggestion : boolean = false;

	private clearSearch$;

	constructor(
		private route: ActivatedRoute,
		private router: Router,
	) { }

	ngOnInit(): void {
		/* On route change, clear search bar */
		this.clearSearch$ = this.router.events.pipe(
				filter(event => event instanceof NavigationStart)
			)
			.subscribe( (event : NavigationStart) => {
				this.search = '';
				this.suggestion = false;
			} );
	}

	showinput() {
		/** this needs to be done with switchmap **/
		if (this.search == "") {
			this.hideinput()
		}

		else {
			this.suggestion = true;
		}
	}

	hideinput() {
		this.suggestion = false;
	}

}