import { Globals } from "../../app/app.globals";
export class Versus {

    constructor() {

        this.height = null;
        this.title = null;
        this.series = [];
        this.size = null;
        this.width = null;
        this.subtitle = null;
        this.categories = null;
        this.yLabelFormat = '{value:.' + Globals.CANTDECIMALES +'f}%';
        this.yTitle = 'Tiempo %';
        this.yMin = 0;
        this.yMax = 100;
        this.inverted = false;
        this.legend = false;
        this.dataLabels = true;
        this.dataLabelsFormat = '{value:.' + Globals.CANTDECIMALES +'f}°%';
        this.dataLabelsFormat2 = '{value:.' + Globals.CANTDECIMALES +'f}°%';
        this.export = false;
        this.metrica = "Hr.";
        this.metricas = [];
        this.headerTooltip = '<span style="font-size:15px">{point.key}</span><br>';
        this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span  style="color:{point.color};"> ■ </span><span>{series.name}: </span>{point.y:.' + Globals.CANTDECIMALES +'f}'+ this.metrica +'</span><br>';
        this.visible = true;
        this.spaceTop = 0;
        this.spaceBottom = 0;
    }

    setTooltip(altTooltip){
        if(altTooltip =="marcha-disponibilidad"){
            this.metrica = "%";
            this.headerTooltip = '<span style="font-size:15px">{point.key}</span><br>';
            this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span  style="color:{point.color};"> ■ </span><span>{series.name}: </span><span >{point.y:.' + Globals.CANTDECIMALES +'f}'+this.metrica+'</span><br>';
        } else if(altTooltip == "metricas"){
            this.headerTooltip = '<span style="font-size:15px">{point.key}</span><br>';
            this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span style="color:{point.color};"> ■ </span><span>{series.name}: </span>{point.y:.' + Globals.CANTDECIMALES +'f}</span><br>';
        } else{
            this.metrica = "Hr.";
            this.headerTooltip = '<span style="font-size:15px">{point.key}</span><br>';
            this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span   style="color:{point.color};"> ■ </span><span>{series.name}: </span>{point.y:.' + Globals.CANTDECIMALES +'f}'+ this.metrica +'</span><br>';
        }

    }

    setMetricas(metrica1,metrica2,metrica3){
        this.metricas = [metrica1,metrica2,metrica3];
    }

    setSeries(series) {
        this.series = series;
    };

    setInverted(inverted) {
        this.inverted = inverted;
    };

    setHeight(height) {
        this.height = height;
    };

    setWidth(width) {
        this.width = width;
    };

    setTitle(title) {
        this.title = title;
    };

    setSubtitle(subtitle) {
        this.subtitle = subtitle;
    };

    setYMax(yMax) {
        this.yMax = yMax;
        if (this.yMax == 100) {
            this.spaceTop = 15;
        }
    };

    setYMin(yMin) {
        this.yMin = yMin;
        if (this.yMin == 0) {
            this.spaceBottom = 15;
        }
    };

    setCategories(categories) {
        this.categories = categories;
    };

    setYLabelFormat(yLabelFormat){
        this.yLabelFormat = yLabelFormat;
    };

    setYTitle(yTitle){
        this.yTitle = yTitle;
    };

    setLegend(legend){
        this.legend = legend;
    };

    setDataLabels(dataLabels){
        this.dataLabels = dataLabels;
    };

    setDataLabelsFormat(dataLabelsFormat){
        this.dataLabelsFormat = dataLabelsFormat;
    };

    setDataLabelsFormat2(dataLabelsFormat){
        this.dataLabelsFormat2 = dataLabelsFormat;
    };

    setExport(exporting) {
        this.export = exporting;
    };

    setAxisVisible(visible){
        this.visible = visible;
    };


    
    
    Draw(){
        var  VersusDefaultChart = {

            chart: {
                zoomType: 'xy',
                spacingTop: this.spaceTop,
                spacingBottom: this.spaceBottom,
                // reflow: true
            },
            exporting:{
                enabled: this.export
            },
            credits:{
                enabled: false
            },
            title: {
                text: this.title
            },
            subtitle: {
                text: this.subtitle
            },
            lang: {
                noData: "Datos Insuficientes."
            },
            xAxis: [{
                categories: this.categories,
                crosshair: true
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: this.dataLabelsFormat,
                    style: {
                        // color: Highcharts.getOptions().colors[1]
                    }
                },
                max:this.yMax,
                min:this.yMin,
                endOnTick: true,
                // softMax: 100,
                title: {
                    text: null,
                    style: {
                     // color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                visible: this.visible,
                title: {
                    text: null,
                    style: {
                        // color: Highcharts.getOptions().colors[0]
                    }
                },
                endOnTick: true,
                max:this.yMax,
                min:this.yMin,
                // softMax: 100,
                labels: {
                    format: this.dataLabelsFormat2,
                    style: {
                        // color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                headerFormat: this.headerTooltip,
                pointFormat: this.bodyTooltip,
                shared: true
            },

            plotOptions: {
                series: {
                    cursor: 'pointer'
                    
                }
            },
            // legend: {
            //     layout: 'vertical',
            //     align: 'left',
            //     x: 120,
            //     verticalAlign: 'top',
            //     y: 100,
            //     floating: true,
            //     backgroundColor: '#FFFFFF'
            // },
            series: this.series

        };

    return VersusDefaultChart;
    }

}
