import { Component, OnInit, Input } from '@angular/core';
import { AxesChartOptions, AxesChartProperties } from './axes-chart.utils';

@Component({
	selector: 'esp-axes-chart',
	templateUrl: './axes-chart.component.html',
	styleUrls: ['./axes-chart.component.scss'],
})
export class AxesChartComponent implements OnInit {
	eChartOptions: any;
	initOpts = { renderer: 'svg' };
	@Input() xAxis: {};
	@Input() yAxis: {};
	@Input() type: string;
	@Input() series: [];
	@Input() title: string;
	@Input() tooltip: {};
	@Input() chartOptions: {};
	@Input() style = { height: '250px' };
	ngOnInit() {
		this.eChartOptions = {
			width: '100%',
			height: '100%',
			title: { padding: 0, itemGap: 0, show: false },
			tooltip: this.getTooptip(),
			xAxis: this.xAxis,
			yAxis: this.yAxis,
			series: this.series,
			...this.getAxesChartOptions(),
		};
	}

	/**
	 * Returns chart options used by Chart component to render the graph
	 *
	 * @remarks
	 * This method is part of the {@link core-library#Statistics | AxesChartComponent}.
	 *
	 * @returns The chart options used by Chart component to render the graph based on graph type.
	 *
	 * @beta
	 */

	getAxesChartOptions() {
		// Setting default chart options
		let defaultChartOptions = AxesChartOptions[AxesChartProperties[this.type]];
		// Override default chart options when chart options are passed from parent component
		defaultChartOptions = { ...defaultChartOptions, ...this.chartOptions };
		return defaultChartOptions;
	}

	/**
	 * Returns chart tooltip used by Chart component to render the graph
	 *
	 * @returns The tooltip an object used by Chart component to render the graph
	 *
	 * @beta
	 */

	getTooptip(): {} {
		const defaultTooltip = {};
		return { ...defaultTooltip, ...this.tooltip };
	}
}