import { Component, Input, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';

@Component({
	selector: 'esp-hierarchical-side-panel',
	templateUrl: './hierarchical.side.panel.component.html',
	styleUrls: ['./hierarchical.side.panel.component.scss'],
})
export class HierarchicalSidePanel implements OnInit {
	@Input() data;
	selectedParent: any;
	selectedChild: any;
	@Output() childSelectionEvent: EventEmitter<any> = new EventEmitter();
	@ViewChild('searchField') searchField;
	searchValue = '';

	constructor() {}

	ngOnInit() {
		const { selectedParent, selectedChild } = this.initializePanel(this.data);
		this.selectedParent = selectedParent;
		this.selectedChild = selectedChild;
		if (this.selectedChild && this.selectedParent) {
			this.childSelectionEvent.emit({ parent: this.selectedParent, child: this.selectedChild });
		}
	}

	initializePanel(data) {
		if (data.length) {
			const selectedParent = data.find(parent => parent.selected);
			const selectedChild = selectedParent.children.find(child => child.selected);
			return { selectedParent, selectedChild };
		} else {
			return { selectedParent: null, selectedChild: null };
		}
	}

	focusInput() {
		this.searchField.nativeElement.focus();
	}

	toggleAccordianView(selectedContent, event) {
		event.stopPropagation();
		this.selectedParent = { ...selectedContent, selected: !selectedContent.selected };
		this.data = this.manageDataForParentLevelSelection(selectedContent);
	}

	manageDataForParentLevelSelection(selectedContent) {
		return this.data.map(content =>
			content.name === selectedContent.name ? { ...content, selected: !content.selected } : { ...content, selected: false }
		);
	}

	childSelection(child, event) {
		event.stopPropagation();
		if (child.name === this.selectedChild.name) {
			return;
		}
		this.selectedChild = { ...child, selected: true };
		this.data = this.manageDataForChildLevelSelection(this.selectedParent, child);
		this.childSelectionEvent.emit({ parent: this.selectedParent, child: this.selectedChild });
	}

	manageDataForChildLevelSelection(parent, child) {
		return this.data.map(content => {
			if (content.name === parent.name) {
				return {
					...content,
					children: content.children.map(childContent =>
						child.name === childContent.name ? { ...childContent, selected: true } : { ...childContent, selected: false }
					),
				};
			} else {
				return {
					...content,
					children: content.children.map(childContent => ({ ...childContent, selected: false })),
				};
			}
		});
	}
}