import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { EChartsOption } from 'echarts';
import { LINE_PATH, BAR_PATH } from '../../../../utils/global.const';

@Component({
	selector: 'aeap-view-only',
	templateUrl: './view-only.modal.html',
	styleUrls: ['./view-only.modal.scss'],
})
export class ViewOnlyComponent implements OnInit {
	data: any;
	modalTitle: string;
	columnDefs: any;
	rowData: any;
	frameworkComponents;
	defaultColDef;
	viewOnlyTabs = [];
	activeTab;
	perpetualChartOpts = { renderer: 'svg' };
	perpetualChart: EChartsOption = {};
	datesArr = [];
	chartData;
	i18N;
	constructor(public bsModalRef: BsModalRef) {
		this.defaultColDef = {
			sortable: true,
			editable: false,
			resizable: false,
			suppressMovable: true,
			suppressMenu: true,
		};
	}

	ngOnInit(): void {
		if (this.data) {
			this.chartData = this.data.chartData;
			this.i18N = this.data.i18N;
		}
		this.modalTitle = this.i18N[this.chartData.title];
		this.viewOnlyTabs = [
			{ title: this.i18N[this.chartData['grid-tab-title']], id: 0 },
			{ title: this.i18N[this.chartData['chart']['title']], id: 1 },
		];
		this.activeTab = this.viewOnlyTabs[0].title;
	}

	setPerpetualData(perpetualData) {
		this.columnDefs = perpetualData.colDefs;
		this.rowData = perpetualData.rowData;

		this.perpetualChart = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
				},
			},
			legend: {
				data: this.getLegendsData(),
				show: true,
				orient: 'horizontal',
				inactiveColor: '#455A64',
				left: 10,
				top: 0,
				itemGap: 45,
				itemWidth: 24,
				itemHeight: 24,
				textStyle: {
					color: '#12263F',
					fontStyle: 'normal',
					fontWeight: 900,
					fontFamily: 'NotosansFont',
					fontSize: 14,
					padding: [3, 0, 0, 0],
				},
			},
			xAxis: [
				{
					type: 'category',
					axisTick: {
						alignWithLabel: true,
					},
					data: this.getAxisXData(),
				},
			],
			yAxis: {
				type: 'value',
			},
			color: this.getChartColors(),
			series: this.getChartSeries(),
		};
	}

	getChartColors(): string[] {
		const colorContainer = [];
		this.chartData['chart']['measures'].forEach(measure => {
			colorContainer.push(measure.color);
		});
		return colorContainer;
	}

	getChartSeries(): object[] {
		const seriesContainer = [];
		this.chartData['chart']['measures'].forEach(measure => {
			seriesContainer.push({
				name: this.i18N[measure.title],
				type: measure.type,
				data: this.getAxisYData(this.i18N[measure.title]),
				lineStyle: { width: 4 },
			});
		});
		return seriesContainer;
	}

	getLegendsData(): object[] {
		const legendContainer = [];
		this.chartData['chart']['measures'].forEach(measure => {
			legendContainer.push({
				name: this.i18N[measure.title],
				icon: this.getIcon(measure.type),
			});
		});
		return legendContainer;
	}

	getIcon(type: string): string {
		switch (type) {
			case 'bar':
				return BAR_PATH;

			case 'line':
				return LINE_PATH;
		}
	}

	onCancel(): void {
		this.bsModalRef.hide();
	}

	changeTab(event): void {
		this.activeTab = event.heading;
	}

	getAxisXData(): string[] {
		const returner = [];
		const children = this.columnDefs[1].children;
		const childrenTwo = this.columnDefs[2].children;
		children.forEach(x => {
			returner.push(x.field);
		});
		childrenTwo.forEach(y => {
			returner.push(y.field);
		});
		this.datesArr = returner;
		return returner;
	}

	getAxisYData(header: string): string[] {
		let nodeObject = {};
		const result = [];
		this.rowData.forEach(node => {
			if (node.header === header) {
				nodeObject = node;
			}
		});
		this.datesArr.forEach(date => {
			result.push(nodeObject[date]);
		});
		return result;
	}
}