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

@Component({
	selector: 'esp-simple-tabs',
	templateUrl: './simple.tabs.component.html',
	styleUrls: ['./simple.tabs.component.scss'],
})
export class SimpleTabsComponent implements OnInit {
	@Input() tabs: ISimpleTab[] = [];
	@Input() classes = 'p-h-24 p-t-24 p-b-16';
	@Output() selectedTab: EventEmitter<any> = new EventEmitter();

	constructor() {}

	ngOnInit() {
		this.initializeSelectedTab(this.tabs);
	}

	initializeSelectedTab(tabs) {
		this.selectedTab.emit(tabs.find(tab => tab.selected));
	}

	onTabChange(selectedTab) {
		this.tabs = this.tabs.map(tab =>
			tab.name === selectedTab.name ? { ...tab, selected: true } : { ...tab, selected: false }
		);
		this.selectedTab.emit({ ...selectedTab, selected: true });
	}
}