import { streetLightMain, colors } from '../main';

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

var estiloLabels = { fontSize: '12px', fontFamily: 'Tahoma, sans-serif' }
var dataCosto = 0;

export function C3_Main(title, measure, dataReal, dataPpto, dataCosto, pptoCosto){

    var chart = {
        chart: {
            type: 'column',
            height: null
        },
        lang: {
            noData: "Datos Insuficientes."
        },
        title: {
            text: title
        },
        xAxis: [{
            categories: ['Gastos'],
            type: 'category',
            labels: {
                rotation: -90,
                style: estiloLabels
            }
        }, {
            categories: ['Costos'],
            type: 'category',
            labels: {
                rotation: -270,
                style: estiloLabels
            },
            opposite: true
        }],
        yAxis: [{
            labels: {
                formatter: function() {
                    return intToString(this.value);
                },
                style: estiloLabels
            },
            // min: 30,
            max: dataPpto*1.2,
            title: {
                text: '<b>' + 'Gasto' + ' ' + measure + '</b>' 
            },
            opposite: true  
        }, {
            labels: {
                formatter: function() {
                    return intToString(this.value);
                },
                style: estiloLabels
            },
            // min: 30,
            max: pptoCosto*1.2,
            title: {
                text: '<b>' + 'Costo' + ' ' + '$USD/Ton' + '</b>' 
            }
        }],
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 1
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            //   pointFormat: '{series.name}: {point.y:,.0f} ' + '<div style="color:blue"><b>' + measure + '</b></div>'
            pointFormat: '<b><span style="color:{series.color}; font-weight:800">• {series.name}</span></b>: <b>{point.y}</b>' + ' ' + measure
        },
        credits: {
            enabled: false
        },
            series: [{  
                type: 'bar',
                name: 'Real',
                data: [dataReal],
                color: streetLightMain(dataReal, dataPpto),
                xAxis: 0,
                yAxis: 0
            }, {
                type: 'bar',
                name: 'Ppto',
                data: [dataPpto],
                color: colors.g,
                xAxis: 0,
                yAxis: 0
            }, {
                type: 'bar',
                name: 'Costos',
                data: [dataCosto],
                color: colors.ghc,
                tooltip: {
                    pointFormat: '<b><span style="color:{series.color}; font-weight:800">• {series.name}</span></b>: <b>{point.y}</b>' + ' ' + '$USD/Ton'
                },
                xAxis: 1,
                yAxis: 1,
                // color: streetLightMain(dataCosto, dataPpto)
            }, {
                type: 'bar',
                name: 'Costos',
                data: [pptoCosto],
                color: colors.t,
                tooltip: {
                    pointFormat: '<b><span style="color:{series.color}; font-weight:800">• {series.name}</span></b>: <b>{point.y}</b>' + ' ' + '$USD/Ton'
                },
                xAxis: 1,
                yAxis: 1,
                // color: streetLightMain(dataCosto, dataPpto)
            }]
    }
    return chart;
  }
