import { OnInit, Component, OnDestroy, HostBinding } from '@angular/core';
import { SearchFactory, SearchService, HttpParams } from 'skf-search-angular-service';
import { ActivatedRoute, Router } from '@angular/router';
import { debounceTime } from 'rxjs/operators';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { PublicationService } from 'src/app/core/services/publication-service/publication.service';
import { AppConfig } from '../../../../app.config';
import { ConstantsService } from 'src/app/shared/constants/constants.service';


@Component({
	selector: 'div[site-search-results]',
	templateUrl: './site-search-results.component.html',
	styleUrls: ['./site-search-results.component.scss']
})
export class SiteSearchResultsMainComponent implements OnInit, OnDestroy {

	search: SearchService;
	subscriptions = [];
	hasSearched = false;  // Used as placeholder before search has been made.
	searchResult;
	tabResult: 'all' | 'products' | 'library' | 'news';

	constructor(
		private searchFactory: SearchFactory,
		private activatedRoute: ActivatedRoute,
		private pubService: PublicationService,
		private router: Router,
		private loadingService: LoadingIndicatorService,
		private constants: ConstantsService
	) {
		this.search = this.searchFactory.get(`site-search-v2-${AppConfig.settings.searchEnvironment.name}`);
	}

	ngOnInit(): void {
		this.resultSubscription();

		// When page is loaded/refreshed or URL is updated, use the query parameters from the url to do a search.
		this.subscriptions.push(this.activatedRoute.queryParams.pipe(debounceTime(200)).subscribe(params => {
			const sitesearchUrl = `${this.pubService.getPublicationPath()}${this.constants.SITE_SEARCH_URL}`;

			// Only update if on site search page
			if (this.router.url.startsWith(sitesearchUrl)) {
				const paramsObj = Object.assign({}, params);
				const paramString = this.paramsToString(paramsObj);

				const pubId = this.pubService.getPublicationId();
				const siteLanguage = this.pubService.getLanguage();

				/**
				 *  Check that all necessary query parameters are set and contain the right values.
				 */
				let modified = false;

				// default * search to get all results
				if (!('q' in paramsObj) || paramsObj.q.trim() === '' ) {
					paramsObj['q'] = '*';
					modified = true;
				}

				// Check if searcher is set. If not, check if on brand site and add prefix if so.
				if (!('searcher' in paramsObj)) {
					paramsObj['searcher'] = 'all';
					modified = true;
				}

				if (!('site' in paramsObj) || paramsObj.site !== pubId) {
					paramsObj['site'] = pubId;
					modified = true;
				}

				if (!('language' in paramsObj) || paramsObj.language !== siteLanguage) {
					paramsObj['language'] = siteLanguage;
					modified = true;
				}

				// If we had to modify query params, navigate to new url. replaceUrl to replace previous wrong params in browser history.
				if (modified) {
					const url = `/${this.activatedRoute.snapshot.url.join('/')}`;

					this.router.navigate([url], {
						queryParams: paramsObj,
						replaceUrl: true	// Don't do an actual re-route
					});
				} else {
					const searchParams = new HttpParams({fromString: paramString});
					this.search.doSearchWithParameters({params: searchParams});
				}
			}
		}));

		// Update URL with search parameters that are received from the SkfSearchAngularServiceService.
		this.subscriptions.push(
		this.search.searchParams.subscribe(
			params => {
				const queryParams = {};

				params.keys().forEach(key => {
					queryParams[key] = params.get(key);
				});

				this.router.navigate([], {
					queryParams: queryParams,
					relativeTo: this.activatedRoute
				});
			}
		));
	}

	ngOnDestroy(): void {
		this.subscriptions.forEach(sub => sub.unsubscribe());
	}

	/** Subscription of search results received from the SkfSearchAngularServiceService */
	resultSubscription() {
		this.subscriptions.push(this.search.result.subscribe(res => {
			if (!res['error']) {
				this.hasSearched = true;
				this.searchResult = res;
				this.tabResult = this.searchResult.search.searchers.find(x => x.selected).name;
			}

			this.loadingService.hide();
		},
		error => { console.log('ERROR: Search result error'); }
		));
	}

	/**
	 * Transform query parameters object to a query parameters string which can be used for searches.
	*/
	public paramsToString(params) {
		let paramString = '';
		Object.keys(params).forEach(key => {
			let value = params[key];
			value = encodeURIComponent(value); // URL encode special characters
			paramString = paramString + key + '=' + value + '&';
		});

		paramString = paramString.slice(0, -1);   // remove last '&' char
		return paramString;
	}
}