import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { ISimpleSideMenu, IAlignSimpleSideMenu } from '../../../utils';

@Component({
	selector: 'esp-side-panel',
	templateUrl: './simple.side.menu.component.html',
	styleUrls: ['./simple.side.menu.component.scss'],
})
export class SimpleSideMenu implements OnInit {
	@Input() data: ISimpleSideMenu[];
	@Input() alignContent: IAlignSimpleSideMenu = { left: false, right: true };
	@Output() itemSelection: EventEmitter<ISimpleSideMenu> = new EventEmitter();

	selectedState: ISimpleSideMenu;

	constructor() {}

	ngOnInit() {
		this.selectedState = this.setSelectedState(this.data);
		this.itemSelection.emit(this.selectedState);
	}

	onPanelItemSelection(event: MouseEvent, item: ISimpleSideMenu) {
		event.stopPropagation();
		if (item.name === this.selectedState.name) {
			return;
		} else {
			this.data = this.data.map(value =>
				value.name === item.name ? { ...value, selected: true } : { ...value, selected: false }
			);
			this.selectedState = this.setSelectedState(this.data);
			this.itemSelection.emit(this.selectedState);
		}
	}

	setSelectedState(data: ISimpleSideMenu[]): ISimpleSideMenu {
		const initialSelectedState = data.find(value => value.selected);
		return initialSelectedState;
	}
}