var icon = {
    'width': 20,
    'path': 'M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z',
    'ascent': 20,
    'descent': 2,
};

function list2dict(values) {

    var o = {};
    $.each(values, function () {
        o[this.name] = this.value;
    });
    return o;
};
/* In this class is defined all the function to RTI plot */
class PcolorBuffer {
    constructor({ div, data, key, props }) {
        this.div = document.getElementById(div);
        this.n = 0;         
        this.divs = [];
        this.wait = false;
        this.key = key;
        this.timer = (props.throttle || 30) * 1000;
        this.lastRan = Date.now();
        this.lastFunc = null;
        this.zbuffer = [];
        this.xbuffer = [];
        this.empty = Array(data.yrange.length).fill(null);
        this.props = props;
        this.setup(data);
    }
    /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
    setup(data) {
        this.last = data.time.slice(-1);
        if (data.time.length == 1) {
            var values = { 'time': data.time, 'data': data[this.key].map(function (x) { return [x] }) };
        } else {
            var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length);
        }
        var t = values.time.map(function (x) {
            var a = new Date(x * 1000);
            // This condition is used to change from UTC to LT
            if (data.localtime == true){
                a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
            }
            return  a;
        });

        var label;
        if (data.localtime == true){
            label = "LT";

        }
        else{
            label = "UTC";
        }

        for (var i = 0; i < data[this.key].length; i++) {
            var layout = {
                xaxis: {
                    title: 'Time ' + label,
                    showgrid: false,
                    linecolor: 'rgb(40, 223, 247)',
                    color: 'rgb(40, 223, 247)',
                    size: 24,
                    titlefont: {
                        color: 'white',
                        size: 24
                    },
                },
                yaxis: {
                    title: 'km',
                    showgrid: false,
                    linecolor: 'rgb(40, 223, 247)',
                    color: 'rgb(40, 223, 247)',
                    size: 24,
                    titlefont: {
                        color: 'white',
                        size: 24
                    },
                },
                paper_bgcolor: 'black',
                plot_bgcolor: 'white',
                titlefont: {
                    color: 'white',
                    size: 24,
                },
                font: {
                    color: 'rgb(40, 223, 247)'
                }
                
            };
            var iDiv = document.createElement('div');
            iDiv.id = 'plot-' + i;
            this.zbuffer.push([]);
            this.n = this.n + 1;
            this.div.appendChild(iDiv);
            this.divs.push(iDiv.id);
            var trace = {
                z: values.data[i],
                x: t,
                y: data.yrange,
                colorscale: this.props.colormap || 'Jet',
                transpose: true,
                type: 'heatmap'
            };

            if (this.props.zmin) { trace.zmin = this.props.zmin }
            if (this.props.zmax) { trace.zmax = this.props.zmax }

            layout.title = 'Channel ' + i + ' - ' + t.slice(-1).toLocaleString();
            var conf = {
                modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
                modeBarButtonsToAdd: [{
                    name: 'Edit plot',
                    icon: icon,
                    click: function (gd) {
                        var div = gd.id;
                        $('input[id=id_plotdiv]').val(div);
                        $('#setup').modal('show');                        
                    }
                }],
                displaylogo: false,
                showTips: true
            };
            Plotly.newPlot('plot-' + i, [trace], layout, conf);
        }
    }

    getSize() {
        var div = document.getElementById(this.divs[0]);
        var t = this.xbuffer.slice(-1)[0];
        var n = 0;
        var timespan = (this.props.timespan || 8) * 1000 * 60 * 60; //If i dont put timespan in rti.html, by default is 8hs

        while ((t - div.data[0].x[n]) > timespan) {
            n += 1;
        }
        return n;
    }

    fill_gaps(xBuffer, zBuffer, interval, N) {

        var x = [xBuffer[0]];
        var z = [];
        var last;

        for (var j = 0; j < N; j++) {
            z.push([zBuffer[j][0]]);
        }

        for (var i = 1; i < xBuffer.length; i++) {
            var cnt = 0;
            last = x.slice(-1)[0];
            while (Math.abs(parseFloat(xBuffer[i]) - last ) > 1.5 * parseFloat(interval)) {
                //console.log(parseFloat(xBuffer[i]));
                //console.log(last);
                //console.log(Math.abs(parseFloat(xBuffer[i]) - last));
                //console.log(parseFloat(interval));
                //console.log("==========");
                cnt += 1;
                last = last + interval;
                x.push(last);
                for (var j = 0; j < N; j++) {
                    z[j].push(this.empty);
                }
                // Avoid infinite loop
                if (cnt == 100) { break; }
            }
            x.push(xBuffer[i]);
            for (var j = 0; j < N; j++) {
                z[j].push(zBuffer[j][i]);
            }
        }
        return { 'time': x, 'data': z };
    }

    plot() {
        // add new data to plots and empty buffers
        var N = this.getSize();
        console.log('Plotting...');
        for (var i = 0; i < this.n; i++) {
            var div = document.getElementById(this.divs[i]);
            if (N > 0) {
                div.data[0].z = div.data[0].z.slice(N, )
                div.data[0].x = div.data[0].x.slice(N, )
            }
            Plotly.extendTraces(div, {
                z: [this.zbuffer[i]],
                x: [this.xbuffer]
            }, [0]);
            this.zbuffer[i] = [];
        }
        this.xbuffer = [];
    }
    //This function just add the last data and is used if previously was used setup()
    update(obj) {

        // fill data gaps
        var cnt = 0;
        console.log('updating');
        while (Math.abs(parseFloat(obj.time[0]) - this.last) > 1.5 * parseFloat(obj.interval)) {
            cnt += 1;
            this.last += obj.interval;
            var newt = new Date((this.last) * 1000);
            // This condition is used to change from UTC to LT
            if (obj.localtime == true){
                newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
            }
            this.xbuffer.push(newt);
            for (var i = 0; i < obj[this.key].length; i++) {
                this.zbuffer[i].push(this.empty);
            }
            // Avoid infinite loop
            if (cnt == 100) { break; }
        }

        // update buffers
        this.last = parseFloat(obj.time[0]);
        var t = new Date(obj.time[0] * 1000);
        // This condition is used to change from UTC to LT
        if (obj.localtime == true){
            t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
        }
        this.xbuffer.push(t);
        for (var i = 0; i < obj[this.key].length; i++) {
            this.zbuffer[i].push(obj[this.key][i]);
            // update title
            var title = this.props.title || ''
            var div = document.getElementById(this.divs[i]);
            Plotly.relayout(div, {
                title: title + ': Channel ' + i + ' - ' + t.toLocaleString(),
            });
        }

        // plot when ready (every 10 secs)        
        if (!this.wait) {
            this.plot();
            this.wait = true;
        } else {
            clearTimeout(this.lastFunc)
            this.lastFunc = setTimeout(function (scope) {
                if ((Date.now() - scope.lastRan) >= scope.timer) {
                    scope.plot()
                    scope.lastRan = Date.now()
                }
            }, this.timer - (Date.now() - this.lastRan), this)
        }
    }
    // With this function You can change parameters in your plot
    restyle(values) {

        var values = list2dict(values);
        var div = document.getElementById(values.plotdiv);

        Plotly.relayout(div, {
            yaxis: {
                range: [values.ymin, values.ymax]
            }

        });

        Plotly.restyle(div, {
            zmin: values.zmin,
            zmax: values.zmax,
            colorscale: values.colormap
        });
    }
}
/* In this class is defined all the function to SPC plot */
class Pcolor {
    constructor({ div, data, props }) {
        this.div = document.getElementById(div);
        this.n = 0;
        this.divs = [];
        this.props = props;
        this.setup(data);
    }
    /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
    setup(data) {
        console.log(data);
        for (var i = 0; i < data.spc.length; i++) {
            var layout = {
                height: 400,
                xaxis: {
                    title: 'Velocity',
                    showgrid: false,
                    zeroline: false,
                    domain: [0, 0.7],
                    linecolor: 'rgb(40, 223, 247)',
                    color: 'rgb(40, 223, 247)',
                    size: 24,
                    titlefont: {
                        color: 'white',
                        size: 24
                    },
                },
                yaxis: {
                    title: 'km',
                    showgrid: false,
                    linecolor: 'rgb(40, 223, 247)',
                    color: 'rgb(40, 223, 247)',
                    size: 24,
                    titlefont: {
                        color: 'white',
                        size: 24
                    },
                },
                xaxis2: {
                    title: 'dB',
                    domain: [0.75, 1],
                    ticks: 'outside',
                    linecolor: 'rgb(40, 223, 247)',
                    color: 'rgb(40, 223, 247)',
                    size: 24,
                    titlefont: {
                        color: 'white',
                        size: 24
                    },
                },
                titlefont: {
                    color: 'white',
                    size: 18
                },
                font:{
                    color:'rgb(40, 223, 247)'
                },
                paper_bgcolor: 'black',
                plot_bgcolor: 'white',
            };
            var iDiv = document.createElement('div');
            iDiv.id = 'plot-' + i;
            iDiv.className += iDiv.className ? ' col-md-6' : 'col-md-6';
            this.n = this.n + 1;
            this.div.appendChild(iDiv);
            this.divs.push(iDiv.id);

            var trace1 = {
                z: data.spc[i],
                x: data.xrange,
                y: data.yrange,
                colorscale: this.props.colormap || 'Jet',
                transpose: true,
                type: 'heatmap'
            };

            var trace2 = {
                x: data.rti[i],
                y: data.yrange,
                xaxis: 'x2',
                yaxis: 'y',
                type: 'scatter',
            };

            if (this.props.zmin) {
                trace1.zmin = this.props.zmin
            }
            if (this.props.zmax) {
                trace1.zmax = this.props.zmax;
                layout.xaxis2.range = [this.props.zmin, this.props.zmax]
            }

            var t = new Date(data.time * 1000);
            // This condition is used to change from UTC to LT
            if (data.localtime == true){
                t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
            }
            layout.title = 'Channel ' + i + ': ' + data.noise[i] + 'dB - ' + t.toLocaleString();
            var conf = {
                modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
                modeBarButtonsToAdd: [{
                    name: 'Edit plot',
                    icon: icon,
                    click: function (gd) {
                        var div = gd.id;
                        $('input[id=id_plotdiv]').val(div);
                        $('#setup').modal('show');                        
                    }
                }],
                displaylogo: false,
                showTips: true
            };
            Plotly.newPlot('plot-' + i, [trace1, trace2], layout, conf);
        }
    }

    plot(obj) {
        this.data = obj;
        // add new data to plots and empty buffers
        console.log('Plotting...');
        var t = new Date(obj.time[0] * 1000);
        // This condition is used to change from UTC to LT
        if (obj.localtime == true){
            t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
        }
        for (var i = 0; i < this.n; i++) {
            var div = document.getElementById(this.divs[i]);
            Plotly.relayout(div, {
                title: 'Channel ' + i + ': ' + obj.noise[i] + 'dB - ' + t.toLocaleString(),

            });
            Plotly.restyle(div, {
                z: [obj.spc[i], null],
                x: [obj.xrange, obj.rti[i]]
            }, [0, 1]);
        }
    }
    // With this function You can change parameters in your plot
    restyle(values) {
        
        var values = list2dict(values);
        var div = document.getElementById(values.plotdiv);

        Plotly.relayout(div, {
            yaxis: {
                range: [values.ymin, values.ymax]
            },
            

        });

        /*Plotly.relayout(div, {
            xaxis: {
                range: [values.xmin, values.xmax]
            },
            

        });*/
        

        Plotly.restyle(div, {
            zmin: values.zmin,
            zmax: values.zmax,
            xmin: values.xmin,
            xmax: values.xmax,
            

            colorscale: values.colormap
        });
    }
}
/* In this class is defined all the function to Scatter(noise) plot */
class Scatter {
    constructor({ div, data, key, props }) {
        this.div = document.getElementById(div);
        this.n = 0;
        this.key = key;
        this.wait = false;
        this.timer = (props.throttle || 30) * 1000;
        this.lastRan = Date.now();
        this.lastFunc = null;
        this.ybuffer = [];
        this.xbuffer = [];
        this.props = props;
        this.setup(data);
    }
    /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
    setup(data) {

        this.data = data; //le agrego juan carlos para ver la data en mi consola
        var traces = [];
        this.last = data.time.slice(-1);
        if (data.time.length == 1) {
            var values = { 'time': data.time, 'data': data[this.key] };
        } else {
            var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length);
        }

        var t = values.time.map(function (x) {
            var a = new Date(x * 1000);
            // This condition is used to change from UTC to LT
            if (data.localtime == true){
                a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
            }
            return  a;
        });

        for (var i = 0; i < data[this.key].length; i++) {

            this.n = this.n + 1;
            this.ybuffer.push([]);
            var trace = {
                x: t,
                y: data[this.key][i],
                mode: 'lines',
                type: 'scatter',
                name: 'Channel ' + i,
                connectgaps:false,
            };

            traces.push(trace);
        }
        var title = this.props.title || ''
        var layout = {
            // autosize: false,
            // width: 800,
            // height: 400,
            title: title + ' - ' + t.slice(-1).toLocaleString(),
            font: {
                size: 18,
                color: 'white'
              },
            plot_bgcolor: 'black',
            paper_bgcolor: 'black',
            xaxis: {
                title: 'Time',
                linecolor: 'rgb(40, 223, 247)',
                color: 'rgb(40, 223, 247)',
                size: 24,
                titlefont: {
                    color: 'white',
                    size: 24
                  },
            },
            yaxis: {
                title: this.props.ylabel || 'dB',
                linecolor: 'rgb(40, 223, 247)',
                color: 'rgb(40, 223, 247)',
                size: 24,
                titlefont: {
                    color: 'white',
                    size: 24
                  },
            },
            titlefont: {
                size: 24,
            }
        };

        if (this.props.ymin) { layout.yaxis.range = [this.props.ymin, this.props.ymax] }

        var conf = {
            modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
            modeBarButtonsToAdd: [{
                name: 'Edit plot',
                icon: icon,
                click: function (gd) {
                    $('#setup').modal('show');
                }
            }],
            displaylogo: false,
            showTips: true
        };
        Plotly.newPlot('plot', traces, layout, conf);
    }

    getSize() {
        var t = this.xbuffer.slice(-1)[0];
        var n = 0;
        var timespan = (this.props.timespan || 12) * 1000 * 60 * 60;

        while ((t - this.div.data[0].x[n]) > timespan) {
            n += 1;
        }
        return n;
    }

    fill_gaps(xBuffer, yBuffer, interval, N) {

        var x = [xBuffer[0]];
        var y = [];

        for (var j = 0; j < N; j++) {
            y.push([yBuffer[j][0]]);
        }

        var last;

        for (var i = 1; i < xBuffer.length; i++) {
            var cnt = 0;
            last = x.slice(-1)[0];
            while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) {
                cnt += 1;
                last = last + interval;
                x.push(last);
                for (var j = 0; j < N; j++) {
                    y[j].push(null);
                }
                // Avoid infinite loop
                if (cnt == 50) { break; }
            }
            x.push(xBuffer[i]);

            for (var j = 0; j < N; j++) {
                y[j].push(yBuffer[j][i]);
            }
        }
        return { 'time': x, 'data': y };
    }

    plot() {
        // add new data to plots and empty buffers
        var xvalues = [];
        var yvalues = [];
        var traces = [];
        var N = this.getSize();
        console.log('Plotting...');
        for (var i = 0; i < this.n; i++) {
            if (N > 0) {
                this.div.data[i].y = this.div.data[i].y.slice(N, )
                this.div.data[i].x = this.div.data[i].x.slice(N, )
            }
            yvalues.push(this.ybuffer[i]);
            xvalues.push(this.xbuffer);
            traces.push(i);
            this.ybuffer[i] = [];
        }
        Plotly.extendTraces(this.div, {
            y: yvalues,
            x: xvalues
        }, traces);
        this.xbuffer = [];
    }
    //This function just add the last data and is used if previously was used setup()
    update(obj) {

        // fill data gaps
        var cnt = 0;
        while (Math.abs(parseFloat(obj.time[0]) - this.last ) > 1.5 * parseFloat(obj.interval)) {
            cnt += 1;
            this.last += obj.interval;
            var newt = new Date((this.last) * 1000);
            // This condition is used to change from UTC to LT
            if (obj.localtime == true){
                newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
            }
            this.xbuffer.push(newt);
            for (var i = 0; i < this.n; i++) {
                this.ybuffer[i].push(null);
            }
            // Avoid infinite loop
            if (cnt == 100) { break; }
        }

        // update buffers
        this.last = parseFloat(obj.time[0]);
        var t = new Date(obj.time[0] * 1000);
        // This condition is used to change from UTC to LT
        if (obj.localtime == true){
            t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
        }
        this.xbuffer.push(t);
        for (var i = 0; i < this.n; i++) {
            this.ybuffer[i].push(obj[this.key][i][0]);
        }
        var title = this.props.title || ''
        Plotly.relayout(this.div, {
            title: title + ' - ' + t.toLocaleString(),
        });

        // plot when ready (every 10 secs)        
        if (!this.wait) {
            this.plot();
            this.wait = true;
        } else {
            clearTimeout(this.lastFunc)
            this.lastFunc = setTimeout(function (scope) {
                if ((Date.now() - scope.lastRan) >= scope.timer) {
                    scope.plot()
                    scope.lastRan = Date.now()
                }
            }, this.timer - (Date.now() - this.lastRan), this)
        }
    }
    // With this function You can change parameters in your plot
    restyle(values) {

        var values = list2dict(values);
        Plotly.relayout(this.div, {
            yaxis: {
                range: [values.ymin, values.ymax]
            }

        });
    }
}