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

    constructor() {
        this.height = null;
        this.title = null;
        this.series = [];
        this.size = null;
        this.width = null;
        this.yTitle = '%';
        this.xTitle = '';
        this.subtitle = null;
        this.categories = null;
        this.yMin = 0;
        this.yMax = 100;
        this.type = 'column';
        this.export = false;
        this.drilldown = false;
        this.legend = true;
        this.stacking = null;
        this.stackLabels = false;
        this.grouping = true;
        this.metrica = 'Hr.'
        this.pointWidth = undefined;
        this.enableYaxis = true;
        this.configStackLabels = ['white', 'normal'];
        this.headerTooltip = '<span style="font-size:15px">{point.key}</span><br>';
        this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span  class=" uk-text-bold" style="color:{point.color};">■ </span><span>{series.name}: </span>{point.y:.' + Globals.CANTDECIMALES +'f}'+ this.metrica +'</span><br>';
        this.minRange = 1;
        this.axisType = 'datetime';
        this.visible = true;
        this.pointer = null;
        this.legendProp = [false,'bottom',0];
    }

    setMetrica(metrica) {
        this.metrica = metrica;
    }

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

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

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

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

    setYMin(yMin) {
        this.yMin = yMin;
    };

    setYMax(yMax) {
        this.yMax = yMax;
    };

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

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

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

    setType(type) {
        this.type = type;
    };

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

    setDrilldownEvent(drilldown) {
        this.drilldown = drilldown;
    };

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

    setStacking(stacking){
        this.stacking = stacking;
    };

    setStackLabels(labels){
        this.stackLabels = labels;
    };

    setGrouping(grouping){
        this.grouping = grouping;
    };
    
    setPointWidth(point){
        this.pointWidth = point;
    };

    setEnabledYAxis(enabled){
        this.enableYaxis = enabled;
    };

    setConfigStackLabels(enabled){
        this.configStackLabels = enabled;
    };

    setMinRange(min){
        this.minRange = min;
    };

    setAxisType(axisType){
        this.axisType = axisType;
    };
    setAxisVisible(visible){
        this.visible = visible;
    };
    setLegendProperties(float,vAlign,y){
        this.legendProp = [float,vAlign,y];
    }

    setTooltip(altTooltip){

        if (altTooltip == 'confiabilidad'){
        
            this.headerTooltip = '';
            this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span  class=" uk-text-bold" style="color:{point.color};">■ </span><span>{series.name}: </span>><br><span>Y: </span>{point.y:.' + Globals.CANTDECIMALES +'f} '+ '%' +'</span><br><span>X: </span>{point.x:.2f}'+ 'Hr.' +'</span><br>';
            this.xTitle = "Hr.";
        }else{
            this.headerTooltip = '<span style="font-size:15px;">{point.key}</span><br>';
            this.bodyTooltip = '<span class= "uk-center" style="font-size:13px"><span  class=" uk-text-bold" style="color:{point.color};">■ </span><span>{series.name}: </span>{point.y:.' + Globals.CANTDECIMALES +'f} '+ altTooltip +'</span><br>';
            this.xTitle = "";
            this.yTitle = altTooltip;
        }
    };
    setPointer(pointer){
        this.pointer = pointer;
    }
    Draw(){

        var columnDefaultChart = {

            chart: {
                type: this.type,
                height: null,
                width: null,
                zoomType: 'x',
            },
            colors: ['#00758d','#00C1E5', '#002C34', '#00C1E5', '#004E5D', '#AEE3ED'],
            exporting: {
                enabled: this.export
            },
            credits:{
                enabled: false
            },
            title: {
                text: this.title,
                style:{
                    "fontSize": "12px"
                },
                y: -13
            },
            subtitle: {
                text: this.subtitle
            },
            xAxis: {
                minRange: this.minRange,
                type: this.axisType,
                dateTimeLabelFormats: {
                    day: '%e of %b'
                },
                categories: this.categories,
                crosshair: true,
                title:{
                    text: this.xTitle
                }
            },
            yAxis: [{
                labels:{
                    enabled:this.enableYaxis,
                },
                min: this.yMin,
                max: this.yMax,
                endOnTick: false,
                startOnTick:false,
                title: {
                    text: this.yTitle
                }
            },{
                visible: this.visible,
                labels:{
                    enabled:this.enableYaxis,
                },
                min: this.yMin,
                max: this.yMax,
                endOnTick: false,
                startOnTick:false,
                opposite: true,
                title: {
                    text: ''
                }
            }],
            legend: {
                enabled: this.legend,
                floating: this.legendProp[0],
                verticalAlign: this.legendProp[1],
                y:this.legendProp[2]
            },
            lang:{
                drillUpText: 'Volver',
                noData: "Datos Insuficientes."
            },

            tooltip: {
                headerFormat: this.headerTooltip,
                pointFormat: this.bodyTooltip,
                footerFormat: '',
                shared: true,
                
                useHTML: true
            },
            plotOptions: {
               
                 series: {
                cursor: this.pointer,
                pointWidth: this.pointWidth,
                }
            },
            // drilldown: {
            //     //for axis label
            //     activeAxisLabelStyle: {
            //         textDecoration: 'none',
            //         fontStyle: null,
            //         color: '#666666',
            //         fontWeight: 'normal'
            //     },
            //     //for datalabel
            //     activeDataLabelStyle: {
            //         textDecoration: 'none',
            //         fontStyle: null,
            //         color: '#666666',
            //         fontWeight: 'normal'
            //     },
            //     drillUpButton: {
            //         relativeTo: 'spacingBox',
            //         position: {
            //             y: -30,
            //             x: 0,
            //             align: 'left',
            //             verticalAlign: 'bottom'
            //         },
            //         theme: {
            //             fill: 'white',
            //             'stroke-width': 1,
            //             stroke: 'silver',
            //             r: 0,
            //             states: {
            //                 hover: {
            //                     fill: 'white',
            //                     bodercolor: '#b2b2b2',
            //                 },
            //                 select: {
            //                     stroke: '#039',
            //                     fill: '#a4edba'
            //                 }
            //             }
            
            //         }
            //     }
            //     },
            series: this.series

        };

        return columnDefaultChart;

    };

}