import { Component, OnInit, Input, ChangeDetectionStrategy, SimpleChanges, ChangeDetectorRef, OnChanges, OnDestroy } from '@angular/core';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { TcmResolverService } from 'src/app/core/services/tcmResolver.service';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';


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

		@Input() facet;
		@Input() stats;

		open = true;
		filterList = [];
		resolvedFilters = [];
		parent;
		resolvedIds;
		tcmIds = [];
		breadcrumb = [];
		selectedCategory;
		subscription: any;

		// Label
		facetNameLabel: string;

		constructor(
			public loadingService: LoadingIndicatorService,
			public changeRef: ChangeDetectorRef,
			public labelService: LabelService,
			private tcmResolver: TcmResolverService
		) { }

		ngOnInit() {
			this.labelService.getLabel(this.facet.displayName).then(res => {
				this.facetNameLabel = res;
				this.changeRef.markForCheck();
			});
		}

		ngOnChanges(changes: SimpleChanges): void {
			if (changes) {
				this.tcmIds = [];

				this.buildBreadcrumb(this.facet.filters);

				// If a category has been selected, show its children.
				// Otherwise, find the lowest node which has more than 1 child, and show that instead.
				if (this.selectedCategory) {
					this.filterList = this.selectedCategory.children;
					const isTcm = this.selectedCategory.displayName.match(/\d+-\d+/);
					if (isTcm) { this.tcmIds.push(isTcm.input); }

				} else {
					this.parent = undefined;
					// if (this.facet.filters.length > 1) { this.filterList = this.facet.filters; }
					this.filterList = this.facet.filters;
					// else {
					// 	this.findLowestBranch(this.facet.filters[0]);
					// }
				}

				// Translate displayName of filters if they are tcm-ids.
				this.filterList.forEach(filter => {
					const isTcm = filter.displayName.match(/\d+-\d+/);
					if (isTcm) { this.tcmIds.push(isTcm.input); }
				});

				// If tcm-id was found in filter names, get their real value from tcmResolver.
				if (this.tcmIds.length > 0) {
					const resolver = this.tcmResolver.resolveTcmIds(this.tcmIds);
					this.subscription = resolver.subscribe(ids => {
						this.resolvedIds = ids;
						this.resolvedFilters = this.filterList.map(filter => {
							if (filter.displayName in this.resolvedIds) { filter.resolvedName = this.resolvedIds[filter.displayName]; }
							else { filter.resolvedName = filter.displayName; }
							return filter;
						});

						if (this.selectedCategory) { this.selectedCategory.resolvedName = this.resolvedIds[this.selectedCategory.displayName]; }
						this.changeRef.detectChanges(); // Needed for updating view after names have been resolved.
					});

				} else { // If no tcm-id was found, use filters as they are.
					this.resolvedFilters = this.filterList;
				}

			}
		}

		ngOnDestroy(): void {
			if (this.subscription) { this.subscription.unsubscribe(); }
		}

		public trackFilters(index, filter) {
			return filter ? filter.displayName : {};
		}

		/** Toggle facet div  */
		public toggleFacet() {
			this.open = !this.open;
		}

		/** Recursively find selected filter */
		public findSelectedCat(filters) {
			let foundFilter;

			filters.forEach(filter => {
				if (filter.selected) {
					this.breadcrumb.push(filter);
					foundFilter = filter;
				} else {
					const crumb = this.findSelectedCat(filter.children);
					if (crumb) {
						this.breadcrumb.push(filter);
						foundFilter = filter;
					}
				}
			});

			return foundFilter;
		}

		/** Builds breadcrumb  */
		public buildBreadcrumb(filters) {
			this.breadcrumb = [];
			this.findSelectedCat(filters);

			// Breadcrumb is built backwards, revers to get right order
			this.breadcrumb.reverse();

			if (this.breadcrumb.length > 0) {
				this.selectedCategory = this.breadcrumb[this.breadcrumb.length - 1];
			}

			// If no parent, set parent to self
			if (this.breadcrumb.length === 1) {
				this.parent = this.selectedCategory;
			}
			else if (this.breadcrumb.length > 1) {
				this.parent = this.breadcrumb[this.breadcrumb.length - 2];
			} else {
				this.parent = undefined;
				this.selectedCategory = undefined;
			}

		}

		/** Recursively go through category tree and find lowest
		 *  first node which has more than 1 child.
		 *
		 *  If you've gone through the whole tree without finding one (no children left), select lowest branch.
		 */
		public findLowestBranch(cat) {
			if (cat) {
				const list = cat.children;
				if (list.length > 1 || cat.count !== this.stats.totalHits) {
					this.filterList = cat.children;
				}
				else if (list.length === 0) {
					cat.select();
				}
				else { this.findLowestBranch(list[0]); }
			}
		}

		public selectFilter(filter) {
			this.loadingService.show();
			if (filter === this.selectedCategory) { this.facet.deselect(); }
			else { filter.select(); }
		}

	}