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

// libs
import {
	ChartComponent,
	ApexAxisChartSeries,
	ApexTitleSubtitle,
	ApexDataLabels,
	ApexChart,
	ApexPlotOptions,
	ApexLegend
} from "ng-apexcharts";
import * as moment from 'moment'

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

export type ChartOptions = {
	series: ApexAxisChartSeries;
	chart: ApexChart;
	dataLabels: ApexDataLabels;
	title: ApexTitleSubtitle;
	plotOptions: ApexPlotOptions;
	legend: ApexLegend;
};

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

	@ViewChild("chart") chart!: ChartComponent;
	public chartOptions!: Partial<ChartOptions>;
	dashboardModel?: DashboardInOutModel;
	public dateFrom: Date = moment(new Date).add(-30, 'days').toDate();
	public dateTo: Date = moment(new Date).add(0, 'days').toDate();

	colors: string[] = ["#fd7f6f", "#7eb0d5", "#b2e061", "#bd7ebe", "#ffb55a", "#ffee65", "#beb9db", "#fdcce5", "#8bd3c7"];

	constructor(
		private fb: UntypedFormBuilder,
		private httpClient: HttpClient,
		private _decimalPipe: DecimalPipe
	) {
	}

	ngOnInit() {
		this.loadData();
	}

	onChangePeriod(dates: Date[]) {
		this.dateFrom = dates[0];
		this.dateTo = dates[1];
		this.loadData();
	}

	private loadData(update?: boolean, category?: string) {
		let params = new HttpParams()
			.set('from', moment(this.dateFrom).format('YYYY-MM-DD'))
			.set('to', moment(this.dateTo).format('YYYY-MM-DD'))
			.set('category', category || '')
			;

		this.httpClient
			.get<DashboardInOutModel>(ApiRoutes.DashboardOutcome, { params: params })
			.subscribe(response => {
				this.dashboardModel = response;

				var series = response.data.map(x => ({
					x: x.name + ' (' + (this._decimalPipe.transform(x.value, '1.2-2') || '') + ')',
					y: x.value
				}));
				var min = Math.min(...response.data.map(x => x.value));
				var max = Math.max(...response.data.map(x => x.value));
				var step = max / 10;
				var ranges = [];
				for (var i = 0; i < this.colors.length; i++) {
					ranges.push({
						from: i === 0 ? min : step * i,
						to: i === this.colors.length - 1 ? max + 10 : step * (i + 1),
						color: this.colors[this.colors.length - i - 1],
					});
				}
				if (update) {
					this.chart.updateSeries([{
						data: series
					}]);
				} else {
					this.setChartOptions(series, ranges);
				}
			});
	}

	private setChartOptions(data: any[], ranges: any[]) {
		var self = this;

		this.chartOptions = {
			series: [{
				data: data
			}],
			chart: {
				type: 'treemap',
				width: 600,
				height: 600,
				events: {
					click: function (event, chartContext, config) {
						var data = self.dashboardModel!.data[config.dataPointIndex];
						self.loadData(true, data.id);
					}
				}
			},
			plotOptions: {
				treemap: {
					enableShades: true,
					shadeIntensity: 0.5,
					reverseNegativeShade: true,
					colorScale: {
						ranges: ranges
					}
				}
			},
		};
	}
}