import { Component, OnInit } from '@angular/core';
import { Post } from '../core/entities';
import { SearchService } from './search.service';
import { ActivatedRoute } from '@angular/router';

@Component({
	selector: 'app-search',
	template: `
		<div>
			<h1>Résultats de la recherche</h1>
			<app-spinner *ngIf="!listArticle"></app-spinner>
			<div *ngIf="listArticle" class="col-lg-8 offset-lg-2">
				<app-post-card *ngFor="let post of listArticle" [post]="post"></app-post-card>
			</div>
		</div>
	`
})
export class SearchComponent implements OnInit {
	searchLoading: boolean;
	listArticle: Array<Post>;

	constructor(
		private activatedRoute: ActivatedRoute,
		private searchService: SearchService
	) {
		this.searchLoading = true;
	}

	ngOnInit(): void {
		this.searchService.search(this.activatedRoute.snapshot.paramMap.get('searchCriteria'))
				.subscribe(listArticle => {
			this.listArticle = listArticle;
			this.searchLoading = false;
		});
	}
}
