import { randomData, colors } from '../../highcharts/main';

// var metaAnual = 70000;

function intToString (value) {
    var suffixes = ["", "k", "k", "b","t"];
    var suffixNum = Math.floor((""+value).length/3);
    var shortValue = parseFloat((suffixNum != 0 ? (value / 1000) : value).toPrecision(2));
    if (shortValue % 1 != 0) {
        var shortNum = shortValue.toFixed(1);
    }
    return shortValue+suffixes[suffixNum];
}

export function streetLightGauge(value, metaMensual){
  var color; var margen = metaMensual*0.90;
  if(value >=0 && value <margen){
    color = colors.c;
  }
  if(value >=margen && value <metaMensual){
    color = colors.y;
  }
  if(value >= metaMensual){
    color = colors.m;
  }
  return color;
}   

function percentOfMeta(metaMensual, cumplimiento){
    // var result = (metaMensual * 0.10) / cumplimiento * 0.10;
    var result = cumplimiento / metaMensual * 100; 
    return result;
}

export function C4_makeGauge_roic(title, measure, dataLength, ceil, subceil, size, metaAnual, metaMensual,cumplimiento){

    var rData = randomData(dataLength,ceil,subceil);
    // var metaMensual = rData[0]; var cumplimiento = rData[1];
    var gap = -(size/5);
    var tick = size/5;

    var porcentajeDeMeta = percentOfMeta(metaMensual, cumplimiento);
  
    var gauge = {
      chart: {
        // style: {
        //   fontFamily: 'Open Sans'
        // },
        type: 'solidgauge',
        backgroundColor: 'transparent',
        height: size,
        // marginBottom: -100 // Agranda un poco el gauge, eliminando el margin por defecto al menos
      },
      title: {
        text: title+' '+measure,
        style: {
          fontFamily: 'Open Sans',
          color: 'white',
          fontSize:22
        }
      },
      exporting:{
        enabled:false,
      },
      pane: {
        center: ['50%', '50%'],
        size: '100%',
        startAngle: -100,
        endAngle: 100,
        rounded:true,
        background: {
            backgroundColor: '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
      },
      yAxis: [{
        lineWidth:0,
        minorTickInterval: null,
        min: 0,
        max: metaAnual,
        tickPixelInterval: 400,
        tickPositions: [0, metaAnual], // Posiciones para el inicial y meta anual
        tickWidth: 0,
        labels: {
            enabled: 'true',
            y: 24,
            style: {
                color: 'white',
                fontSize: '20px',
                fontWeight: 'bold',
                
            }
        },
        minPadding:1,
        zIndex: -1
      }, {
        zIndex: 5,
        linkedTo: 0,
        lineWidth: 2,
        minorTickLength: 0,
        tickPositions: [metaMensual], // Posicion solo para el tick de meta mensual
        tickLength: tick,
        tickColor: colors.lg,
        lineColor: streetLightGauge(cumplimiento, metaMensual),
        labels: {
          distance: 20,
          style: {
            color: 'white',
            fontSize: '15px',
            fontWeight: 'bold'
          },
          formatter:function(){
            var value = intToString(this.value);
            return value + '%';
          }
        }
      }],
      plotOptions: {
          solidgauge: {
              dataLabels: {
                  style: {
                    color: 'white',
                    fontSize: '23px',
                    fontWeight: 'bold',
                    textOutline: false
                  },
                  enabled: true,
                  borderWidth: 0,
                  verticalAlign: 'bottom',
                  formatter: function(){
                    var cumplimientoSemanal = this.series.data[1].y;
                    var label = "<span>" + cumplimientoSemanal.toLocaleString() + '%</span>';
                    return label;
                  }
              }
          }
      },
      credits: {
          enabled: false
      },
      tooltip: {
            enabled: false,
            shared: true,
            hideDelay: 100,
            followPointer: true,

            pointFormatter: function(){
                return '<b>'+Math.round(porcentajeDeMeta,2)+'% de Cumplimiento'+'</b>';
            }
      },
  
      series: [{
  
        data: [{
  
          name: 'metaMensual',
          radius: 100,
          innerRadius: 55,
          y: metaMensual,
          color: colors.lg
  
        }, {
  
          name: 'Cumplimiento',
          radius: 100,
          innerRadius: 60,
          y: cumplimiento,
          color: streetLightGauge(cumplimiento, metaMensual),
  
        }]
      }]
    }
    return gauge;
  }