import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ApiService } from '../../../../core/api/api.service.js';

declare var require: any;
var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);

@Component({
	selector: 'kt-semanal',
	templateUrl: './semanal.component.html',
	styleUrls: ['./semanal.component.scss'],
})

export class SemanalComponent implements OnInit {

	titulo = 'Reporte semanal';
	colores = ['#fecd6c','#d7ad5b','#a98847','#7b6333','#77c298','#5c9675','#367f56','#165532','#718dbf','#5c729a','#364f7b','#193059','#a4547d','#7e4060','#6b274a','#521333','#e84d60','#c24050','#9a333f','#761e28','#570b15','#000000','#363636','#4a4a4a','#5e5e5e','#787878','#9a9a9a','#f1001e','#e800f1'];
	isLoading = true;

	constructor(private api: ApiService, private ref: ChangeDetectorRef) {}

	ngOnInit() {
		this.getInformation();
	}

	getInformation(){
		this.isLoading = true;
		this.api.reportesService.getChartReports('semanal').subscribe(res => {
			this.isLoading = false;
			this.showCharts(res);
			this.ref.detectChanges();
		}, () => {
			this.isLoading = false;
		});
	}

	setChartConfig(){
		let coloresRandom = this.shuffleColor(this.colores);

		Highcharts.setOptions({
			colors: Highcharts.map(coloresRandom, function (color) {
				return {
					radialGradient: {
						cx: 0.5,
						cy: 0.3,
						r: 0.7
					},
					stops: [
						[0, color],
						[1, Highcharts.Color(color).brighten(-0.2).get('rgb')] // darken
					]
				};
			}),
			lang: {
				decimalPoint: '.',
				thousandsSep: ','
			}
		});
	}

	showCharts(result){

		let rpt1_nombre_reporte = 'Total de servicios por nombre y precios totales';
		let rpt1_nombre_id = 'rpt_servicios_nombre_precios';
		let rpt1_etiquetas = 'Total de servicios: {point.y} <br>'+'Total de costo: ${point.costo:,.2f}';
		let rpt1_nombre_reporte_filename = 'Total de servicios por nombre y precios totales';

		let rpt2_nombre_reporte = 'Total de tipos de servicio';
		let rpt2_nombre_id = 'rpt_tipos_servicios';
		let rpt2_etiquetas = 'Total de servicios: {point.y}';
		let rpt2_nombre_reporte_filename = 'Total de tipos de servicio';

		let rpt3_nombre_reporte = 'Total de estados de servicio';
		let rpt3_nombre_id = 'rpt_tipos_estados_servicios';
		let rpt3_etiquetas = 'Total de servicios: {point.y}';
		let rpt3_nombre_reporte_filename = 'Total de estados de servicio';

		let rpt4_nombre_reporte = 'Total de origenes';
		let rpt4_nombre_id = 'rpt_tipos_origenes';
		let rpt4_etiquetas = 'Total de servicios: {point.y}';
		let rpt4_nombre_reporte_filename = 'Total de origenes';

		let rpt5_nombre_reporte = 'Total de servicios de atención a cliente';
		let rpt5_nombre_id = 'rpt_atencion_cliente';
		let rpt5_nombre_reporte_filename = 'Total de servicios de atención a cliente';

		let rpt6_nombre_reporte = 'Total de servicios de operadores';
		let rpt6_nombre_id = 'rpt_operadores';
		let rpt6_nombre_reporte_filename = 'Total de servicios de operadores';

		let rpt7_nombre_reporte = 'Total de servicios por vehiculos y precios totales';
		let rpt7_nombre_id = 'rpt_servicios_vehiculos_precios';
		let rpt7_etiquetas = 'Total de servicios: {point.y} <br>'+'Total de costo: ${point.costo:,.2f}';
		let rpt7_nombre_reporte_filename = 'Total de servicios por vehiculos y precios totales';

		let rpt8_nombre_reporte = 'Capacidad aprovechada';
		let rpt8_nombre_id = 'rpt_capacidad_aprovechada_semanal';
		let rpt8_etiquetas = 'Total de servicios: {point.y} <br>'+'Total de costo: ${point.costo:,.2f}';
		let rpt8_nombre_reporte_filename = 'Capacidad aprovechada - semanal';

		this.crearGraficaPastel(result.servicios_nombre_precios.servicios, rpt1_nombre_reporte, rpt1_nombre_id, rpt1_etiquetas, rpt1_nombre_reporte_filename);
		this.crearGraficaPastel(result.tipos_servicios, rpt2_nombre_reporte, rpt2_nombre_id, rpt2_etiquetas, rpt2_nombre_reporte_filename);
		this.crearGraficaPastel(result.tipos_estados_servicio, rpt3_nombre_reporte, rpt3_nombre_id, rpt3_etiquetas, rpt3_nombre_reporte_filename);
		this.crearGraficaPastel(result.tipos_origen, rpt4_nombre_reporte, rpt4_nombre_id, rpt4_etiquetas, rpt4_nombre_reporte_filename);
		this.crearGraficaBarras(result.atencion_cliente, rpt5_nombre_reporte, rpt5_nombre_id, rpt5_nombre_reporte_filename);
		this.crearGraficaBarras(result.operadores, rpt6_nombre_reporte, rpt6_nombre_id, rpt6_nombre_reporte_filename);
		this.crearGraficaPastel(result.servicios_vehiculos_precios, rpt7_nombre_reporte, rpt7_nombre_id, rpt7_etiquetas, rpt7_nombre_reporte_filename);
		this.crearGraficaCapacidadAprovechada(result.capacidad_aprovechada, rpt8_nombre_reporte, rpt8_nombre_id, rpt8_nombre_reporte_filename);
	}

	crearGraficaPastel(datos, nombre_reporte, id, etiquetas, filename) {
		var datosFloat = [];
		for(var i=0; i<datos.length;++i){
			datosFloat.push({name: datos[i].name, y: parseFloat(datos[i].y), costo: datos[i].costo});
		}

		Highcharts.chart(id, {
			chart: {
				plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false,
				height: '600',
				marginBottom: 50,
				type: 'pie',
				spacing: [10, 10, 10, 10]
			},
			exporting: {
				buttons: {
					contextButton: {
						menuItems: [
							{
								text: 'Generar PDF',
								textKey: 'downloadPDF',
								onclick: function () {
									this.exportChart({
										type: 'application/pdf',
										filename: 'Semanal ' + filename
									});
								}
							}, {
								text: 'Generar PNG',
								textKey: 'downloadPNG',
								onclick: function () {
									this.exportChart({
										type: 'image/png',
										filename: 'Semanal ' + filename
									});
								}
							}
						]
					}
				},
				scale: 1,
				sourceWidth: 1920,
				sourceHeight: 1080
			},
			credits: {
				enabled: false
			},
			title: {
				text: nombre_reporte
			},
			tooltip: {
				pointFormat: etiquetas
			},
			plotOptions: {
				pie: {
					size: '90%',
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						connectorShape: 'crookedLine',
						crookDistance: '90%',
						alignTo: 'connectors',
						format: "<b style='color:#CE402D; font-size: 13px'>{point.name}</b> <br>"+
						etiquetas,
						style: {
							color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#404040'
						}
					}
				}
			},
			series: [{
				name: '',
				data: datosFloat
			}]
		});
	}

	crearGraficaBarras(datos, nombre_reporte, id, filename) {
		Highcharts.chart(id, {
			chart: {
				type: 'column'
			},
			title: {
				text: nombre_reporte
			},
			exporting: {
				buttons: {
					contextButton: {
						menuItems: [
							{
								text: 'Generar PDF',
								textKey: 'downloadPDF',
								onclick: function () {
									this.exportChart({
										type: 'application/pdf',
										filename: 'Semanal ' + filename
									});
								}
							}, {
								text: 'Generar PNG',
								textKey: 'downloadPNG',
								onclick: function () {
									this.exportChart({
										type: 'image/png',
										filename: 'Semanal ' + filename
									});
								}
							}
						]
					}
				},
				sourceWidth: 1920,
				sourceHeight: 1080
			},
			credits: {
				enabled: false
			},
			subtitle: {
				//text: 'Source: WorldClimate.com'
			},
			xAxis: {
				categories: datos.usuarios
			},
			yAxis: {
				tickInterval: 1,
				min: 0,
				title: {
					text: 'Servicios'
				}
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					'<td style="padding-left:5px;"><b>{point.y}</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: datos.datos
		});
	}

	crearGraficaCapacidadAprovechada(datos, nombre_reporte, id, filename) {
		var datos_xAxis = [];
		var datos_series = [];

		for(var i=0; i<datos.length;++i){
			var tmpCalculo = 0;
			if(parseFloat(datos[i].total_duracion_fracc)>0 && parseFloat(datos[i].objetivo_mensual)>0){
				tmpCalculo = (parseFloat(datos[i].total_duracion_fracc)/parseFloat(datos[i].objetivo_semanal))*100;
			}

			datos_xAxis.push(datos[i].tipo_vehiculo);
			datos_series.push({name: datos[i].tipo_vehiculo, y: tmpCalculo});
		}

		Highcharts.chart(id, {
			chart: {
				type: 'column'
			},
			title: {
				text: nombre_reporte
			},
			exporting: {
				buttons: {
					contextButton: {
						menuItems: [{
							text: 'Generar PDF',
							textKey: 'downloadPDF',
							onclick: function () {
								this.exportChart({
									type: 'application/pdf',
									filename: filename
								});
							}
						}, {
							text: 'Generar PNG',
							textKey: 'downloadPNG',
							onclick: function () {
								this.exportChart({
									type: 'image/png',
									filename: filename
								});
							}
						}]
					}
				},
				sourceWidth: 1920,
				sourceHeight: 1080
			},
			credits: {
				enabled: false
			},
			subtitle: {
				//text: 'Source: WorldClimate.com'
			},
			xAxis: {
				type: 'category'
			},
			yAxis: {
				//tickInterval: 10,
				min: 0,
				title: {
					text: 'Cumplimiento Objetivo'
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">Cumplimiento: </td>' +
					'<td style="padding-left:5px;"><b>{point.y}%</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: "Tipos de Vehículo",
				colorByPoint: true,
				data: datos_series
			}]
		});
	}

	shuffleColor(arra1) {
		var ctr = arra1.length, temp, index;

		while (ctr > 0) {
			index = Math.floor(Math.random() * ctr);
			ctr--;
			temp = arra1[ctr];
			arra1[ctr] = arra1[index];
			arra1[index] = temp;
		}
		return arra1;
	}
}
