import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter, ChangeDetectorRef, OnDestroy} from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { FilterToggleService } from 'src/app/core/services/filter-toggler/filter-toggle.service';

@Component ({
		selector: 'app-facet-list',
		templateUrl: './facet-list.component.html',
		styleUrls: ['./facet-list.component.scss'],
		changeDetection: ChangeDetectionStrategy.OnPush
})
export class FacetListComponent implements OnInit, OnDestroy {

	@Input() facets;
	@Input() stats;
	@Input() useHierarchy = true;
	@Input() id: string;

	subscriptions = [];
	showFilters: boolean;

	constructor(
		public loadingService: LoadingIndicatorService,
		private constants: ConstantsService,
		private filterToggleService: FilterToggleService,
		private cdRef: ChangeDetectorRef
	) { }

	ngOnInit() {
		// Close filters when screen with is larger than 991px.
		const resizeEvent = fromEvent(window, 'resize');
		this.subscriptions.push(resizeEvent.pipe(map(() => {
			return document.documentElement.clientWidth;
		}), debounceTime(500)).subscribe(data => {
			if (data > this.constants.BOOTSTRAP_BREAKPOINTS.LG) { this.close(); }
		}));

		this.subscriptions.push(this.filterToggleService.filterState.subscribe(state => {
			this.showFilters = state[this.id];
			this.cdRef.detectChanges();
		}));
	}

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

	/** This is used to not re-render all facets when some facets are changed/removed/added.
		* Only the ones that have actually changed will be re-rendered.
	*/
	public trackFacets(index, facet) {
		return facet ? facet.displayName : {};
	}

	/** Hide filter section when clicking outside, only on small devices */
	public close() {
		this.filterToggleService.closeFilters(this.id);
	}
}