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

 @Component({
	selector: 'app-search-bar',
	template: `
		<div id="search-bar">
			<input id="search" name="search" type="text" [(ngModel)]="model" (keyup.enter)="search()" />
			<label for="search" class="label-icon">
				<i id="search-icon" class="fa fa-search" (click)="search()"></i>
			</label>
		</div>
	`,
	styles: [`
		div#search-bar {
			position: relative;
			margin-right: 5px;
		}

		input#search, input#search:focus {
			border-bottom: none;
		}

		input#search {
			width: 400px;
			height: 36px;
			color: white;
			background-color: #5c6bc0;
			border-radius: 2px;
			border-style: unset;
			padding-left: 10px;
			padding-right: 35px;
			transition: all 0.2s ease-in;
		}

		input#search:focus {
			background: white;
			color: #3f51b5;
		}

		i#search-icon {
			font-size: 20px;
			position: absolute;
			right: 15px;
			top: 8px;
			color: #9e9e9e;
			cursor: pointer;
		}
	`]
})
export class SearchBarComponent {
	model: string;

	constructor(
		private router: Router
	) {}

	search(): void {
		if (this.model) {
			this.router.routeReuseStrategy.shouldReuseRoute = () => false;
			this.router.navigateByUrl(`/posts/search/${this.model}`).then(() => {
				this.router.navigated = false;
				this.router.navigate([this.router.url]);
			});
		}
	}
}
