import { Component, OnInit, Input, OnDestroy, HostBinding } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { RowResolverService } from 'src/app/core/services/row-resolver.service';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';

interface Tab {
	Id: string; // Used by the shortcuts component as a scroll target
	Title: string;
	Content: any[];
	ContentIds: string[];
}

interface TabRow {
	activeTab: Tab;
	activeIndex: number;
	tabs: Tab[];
	tabIdToActivate: string;
}

@Component({
	selector: 'div[tab-main]',
	templateUrl: './tab-main.component.html',
	styleUrls: ['./tab-main.component.scss'],
})
export class TabMainComponent implements OnInit, OnDestroy {

	@Input() entity;
	data: TabRow;
	id: string = this.idService.getId();
	inDesktop: boolean;

	constructor(public rowResolver: RowResolverService,
				// Constants is used in the html template
				public constants: ConstantsService,
				public idService: IdGeneratorService,
				public util: UtilService,
				private activatedRoute: ActivatedRoute,
				public resize: ResizeContentService) { }

	ngOnInit() {
		this.data = this.parseJson(this.entity);
		this.resize.registerCallback(this.id, e => this.onResize());
		// Call it here so that the inDesktop get's its proper value without the need to resize the browser
		this.onResize();
	}

	ngOnDestroy(): void {
		this.resize.destroyCallback(this.id);
	}

	onResize() {
		const currentWidth = window.innerWidth;
		this.inDesktop = currentWidth >= this.constants.BOOTSTRAP_BREAKPOINTS.MD;
	}

	parseJson(jsonData: any): TabRow {
		const itemId = (this.activatedRoute.snapshot.fragment || '');
		const allRawTabs: any[] = this.util.extract(jsonData, 'Entities' ) || [];
		const tabs = allRawTabs.map(rawTab => this.parseTab(rawTab));

		const tab = // try find a tab with the tab nested component-id or tab id specified in the url
				tabs.find(t => t.Id.includes(itemId)) ||
				tabs.find(t => t.ContentIds.includes(itemId));

		const tabIdToActivate = tab !== undefined ? tab.Id : '';
		const tabRow: TabRow = {
			activeTab: tabs[0],
			activeIndex: 0,
			tabs: tabs,
			tabIdToActivate: tabIdToActivate
		};
		return tabRow;
	}

	parseTab(rawTabJson: any): Tab {
		const tabTitle: string = this.util.extract(rawTabJson, 'TabTitle');
		// Apply to row transformer since the template expects this format (this is the same that is used for regions)
		const entities = this.util.extract(rawTabJson, 'TabContnetEntities');
		const entitiesGroupedAsRows = this.rowResolver.transform(entities, 'MAIN');
		const id = this.util.extract(rawTabJson, 'Id');
		 // Add ids for all entities present in all tabs
		const contentIds: string[] = entities.map(e => {
			if(e.Id !== undefined){
				return e.Id.includes('-') ? `${this.constants.COMPONENT_ID_PREFIX}-${e.Id.split('-')[0]}` : `${this.constants.COMPONENT_ID_PREFIX}-${e.Id}`;
			}
		});
		// Entities that don't have Id are arrays and need further processing
		entities.forEach(e => {
			if(e.Id === undefined && e.Entities !== undefined){
				contentIds.push(e.Entities.map(ee => {
					if(ee.Id !== undefined){
						return ee.Id.includes('-') ? `${this.constants.COMPONENT_ID_PREFIX}-${ee.Id.split('-')[0]}` : `${this.constants.COMPONENT_ID_PREFIX}-${ee.Id}`;
					}
				}));
			}
		});
		const tab: Tab = {
			Id: `${this.constants.COMPONENT_ID_PREFIX}-${id}`,
			Title: tabTitle,
			Content: entitiesGroupedAsRows,
			ContentIds: contentIds
		};

		return tab;
	}

	setActiveTab(tabRow: TabRow, index: number): void {
		const newActive = tabRow.tabs[index];
		tabRow.activeIndex = index;
		tabRow.activeTab = newActive;
	}

	tabClick(index): void {
		this.setActiveTab(this.data, index);
	}

}