import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { getDefaultTooltip, getDefaultChartOptions } from './circular-graph.utils';

@Component({
	selector: 'esp-circular-graph',
	templateUrl: './circular-graph.component.html',
	styleUrls: ['./circular-graph.component.scss'],
})
export class CircularGraphComponent implements OnInit {
	@Input() type: string = null;
	@Input() data: any[] = null;
	@Input() title: string = null;
	@Input() tooltip: any = null;
	@Input() seriesProperties: any;
	@Input() chartOptions: any = null;
	@Output() eChartClick = new EventEmitter<any>();
	@Output() eChartInit = new EventEmitter<any>();

	eChartOptions = { title: {}, tooltip: {}, series: [] };
	initOpts = { renderer: 'svg' };
	constructor() {}

	ngOnInit() {
		this.eChartOptions = {
			title: {
				text: this.title,
			},
			tooltip: this.getTooltip(),
			series: [
				{
					...this.getSeriesProperties(),
					data: this.getData(),
				},
			],
			...this.chartOptions,
		};
	}

	/**
	 * Returns chart options used by Chart component to render the graph
	 *
	 * @remarks
	 * This method is part of the {@link CircularGraphsComponent}.
	 *
	 * @returns The chart options used by Chart component to render the graph based on graph type
	 *
	 * @beta
	 */
	getCircularChartOptions(): {} {
		const DefaultOptions = getDefaultChartOptions(this.type);
		return {
			...DefaultOptions,
			...this.chartOptions,
		};
	}

	/**
	 * Returns chart data used by Chart component to render the graph
	 *
	 * @remarks
	 * This method is part of the {@link CircularGraphsComponent}.
	 *
	 * @returns The chart data used by Chart component to render the graph
	 *
	 * @beta
	 */
	getData(): any[] {
		return this.data ? this.data : [];
	}

	/**
	 * Returns chart type used by Chart component to render the graph
	 *
	 * @remarks
	 * This method is part of the {@link CircularGraphsComponent}.
	 *
	 * @returns The chart type an object used by Chart component to render the graph
	 * by combining chart properties.
	 *
	 * @beta
	 */
	getSeriesProperties(): {} {
		return {
			type: this.type,
			avoidLabelOverlap: false,
			...this.seriesProperties,
		};
	}

	/**
	 * Returns chart tooltip used by Chart component to render the graph
	 *
	 * @remarks
	 * This method is part of the {@link core-library#Statistics | AxesChartComponent}.
	 *
	 * @returns The tooltip an object used by Chart component to render the graph
	 *
	 * @beta
	 */
	getTooltip(): {} {
		const defaultTooltip = getDefaultTooltip();
		return { ...defaultTooltip, ...this.tooltip };
	}

	/**
	 * No Return
	 *
	 * @returns It emit the e-chart instance
	 *
	 */
	onEChartClick(ec): void {
		this.eChartClick.emit(ec);
	}

	onEchartInit(ec): void {
		this.eChartInit.emit(ec);
	}
}