// angular
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DecimalPipe } from '@angular/common';

// libs
import {
	ApexAxisChartSeries,
	ApexChart,
	ApexXAxis,
	ApexDataLabels,
	ApexStroke,
	ApexMarkers,
	ApexYAxis,
	ApexGrid,
	ApexTitleSubtitle,
	ApexTooltip,
	ApexLegend,
	ApexFill,
	ApexResponsive,
	ApexNonAxisChartSeries,
} from 'ng-apexcharts';
import { ChartComponent } from "ng-apexcharts";

// app
import { ApiRoutes } from '../../api-routes';
import { DashboardModel } from '../../model/dashboard.model';
import { DashboardRestModel } from '../../model/dashboard.model';

export type ChartOptions = {
	series: ApexAxisChartSeries;
	series2: ApexNonAxisChartSeries;
	chart: ApexChart;
	xaxis: ApexXAxis;
	stroke: ApexStroke;
	dataLabels: ApexDataLabels;
	markers: ApexMarkers;
	colors: string[];
	yaxis: ApexYAxis;
	grid: ApexGrid;
	legend: ApexLegend;
	tooltip: ApexTooltip;
	fill: ApexFill;
	title: ApexTitleSubtitle;
	responsive: ApexResponsive[];
	labels: string[];
};

@Component({
	selector: 'app-dashboard2',
	templateUrl: './dashboard2.component.html',
	styleUrls: ['./dashboard2.component.scss'],
})
export class Dashboard2Component implements OnInit {

	@ViewChild("chart") chart!: ChartComponent;
	public pieChartOptions!: Partial<ChartOptions>;
	top10Balance?: DashboardRestModel[];
	top10BalanceOther?: number;
	top10BalanceTotal?: number;
	dashboardModel?: DashboardModel;

	//  color: ["#3FA7DC", "#F6A025", "#9BC311"],
	constructor(
		private httpClient: HttpClient,
		private _decimalPipe: DecimalPipe
	) {

	}

	ngOnInit() {
		this.httpClient
			.get<DashboardModel>(ApiRoutes.Dashboard)
			.subscribe(data => {
				data.incomeChange = this.calcChanges(data.incomeLast, data.incomePrevious);
				data.outcomeChange = this.calcChanges(data.outcomeLast, data.outcomePrevious);

				var labels = [];
				var series2: number[] = [];
				for (var i = 0; i < data.balanceRests.length; i++) {
					let item = data.balanceRests[i];
					labels.push(item.name);
					series2.push(item.balanceAtRate);
				}

				this.balanceChart(labels, series2);

				this.top10Balance = data.balanceRests
					.filter(x => x.balanceAtRate > 0)
					.sort(x => x.balanceAtRate)
					.slice(0, 10);

				this.top10BalanceTotal = data.balanceRests.reduce((sum, current) => sum + current.balanceAtRate, 0);
				this.top10BalanceOther = this.top10Balance.reduce((sum, current) => sum + current.balanceAtRate, 0);
				this.top10BalanceOther = this.top10BalanceTotal - this.top10BalanceOther;

				this.dashboardModel = data;
			});
	}

	private calcChanges(newValue: number, oldValue: number): number {
		if (newValue > oldValue) {
			return (newValue - oldValue) / oldValue * 100;
		}
		else if (newValue < oldValue) {
			return (oldValue - newValue) / oldValue * 100;
		}

		return 0;
	}

	private balanceChart(labels: string[], series2: number[]) {
		var self = this;

		this.pieChartOptions = {
			labels: labels,
			series2: series2,
			chart: {
				type: 'donut',
				width: 600,
				height: 600,
			},
			legend: {
				show: true,
			},
			dataLabels: {
				enabled: false,
			},
			responsive: [{
				breakpoint: 480,
				options: {
					legend: {
						position: 'bottom'
					}
				},
			}],
			tooltip: {
				x: {
					show: false,
				},
				y: {
					formatter: function (value, series) {
						return self._decimalPipe.transform(value, '1.2-2') || "";
					}
				}
			}
		};
	}
}