import { AfterViewInit, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { ApiService } from '../../../../core/api/api.service';
import { ModalFiltrosEncuestaGeneralComponent } from './modal-filtros-encuesta-general/modal-filtros-encuesta-general.component';

declare var require: any;
var Highcharts = require('highcharts');
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);
@Component({
	selector: 'kt-encuesta-general',
	templateUrl: './encuesta-general.component.html',
	styleUrls: ['./encuesta-general.component.scss']
})
export class EncuestaGeneralComponent implements OnInit, AfterViewInit {

	data = null;
	showMessageSetFilters = true;
	showMessageWait = false;
	canExport = false;
	isLoading = false;
	titulo = "Reporte Encuestas Doméstico y Empresarial"
	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'];

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

	ngOnInit() {
	}

	ngAfterViewInit() {
		this.filters();
	}

	filters(){
		const dialogRef = this.dialog.open(ModalFiltrosEncuestaGeneralComponent, {
			data: this.data,
			disableClose: true
		});

		dialogRef.afterClosed().subscribe(data => {
			if(data){
				this.showMessageSetFilters = false;
				this.data = data;
				this.titulo = 'Reporte Encuestas Doméstico y Empresarial (' + data.user + ')';
				this.getInformation();
			}
		});
	}

	getInformation(excel = false){
		if(this.data){
			this.isLoading = true;
			this.canExport = false;
			this.showMessageSetFilters = true;
			this.ref.detectChanges();
			let url = excel? 'servicios/encuesta/excel' : 'servicios/encuesta';

			this.api.reportesService.getInformation(url, this.data).subscribe(res => {

				this.isLoading = false;
				this.canExport = true;
				this.showMessageSetFilters = false;

				if(excel){
					if (res.nombre_archivo) {
						document.location.href = this.api.reportesService.baseUrlStorage + 'servicios_encuestas/' + res.nombre_archivo;
					}
				}else{
					this.showCharts(res);
				}

				this.ref.detectChanges();
			}, () => {
				this.isLoading = false;
				this.showMessageWait = false;
				this.canExport = true;
				this.showMessageSetFilters = false;
			});
		}
	}

	showCharts(result){

		var rpt1_nombre_reporte = 'Encuesta General Doméstico';
		var rpt1_nombre_id = 'rpt_encuesta_general_domesticos';
		var rpt1_nombre_reporte_filename = 'Encuesta General Doméstico';

		var rpt2_nombre_reporte = 'Encuesta General Empresarial';
		var rpt2_nombre_id = 'rpt_encuesta_general_empresariales';
		var rpt2_nombre_reporte_filename = 'Encuesta General Empresarial';

		this.crearGraficaBarrasEncuesta(result.domestico, rpt1_nombre_reporte, rpt1_nombre_id, rpt1_nombre_reporte_filename);
		this.crearGraficaBarrasEncuesta(result.empresarial, rpt2_nombre_reporte, rpt2_nombre_id, rpt2_nombre_reporte_filename);
	}

	crearGraficaBarrasEncuesta(data, nombre_reporte, id, filename) {

		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: ','
			}
		});

		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: 1024,
				sourceHeight:500
			},
			credits: {
				enabled: false
			},
			xAxis: {
				type: 'category',
				labels: {
					style: {
						fontSize: '11px',
						fontFamily: 'Verdana, sans-serif'
					}
				}
			},
			yAxis: {
				tickInterval: 10,
				max: 100,
				title: {
					text: 'Porcentaje Mensual'
				}
			},
			legend: {
				enabled: false
			},
			tooltip: {
				pointFormat: 'Porcentaje <b>{point.y:.1f} %</b>',
				valueSuffix: ' %'
			},
			series: [{
				name: 'Porcentaje de Encuesta',
				data: data,
				dataLabels: {
					enabled: true,
					rotation: 0,
					color: '#ffffff',
					align: 'center',
					format: '{point.y:.1f}', // one decimal
					y: 30, // 10 pixels down from the top
					style: {
						fontSize: '13px',
						fontFamily: 'Verdana, sans-serif'
					}
				}
			}]
		});
	}

	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;
	}
}
