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 }) {
        this.div = document.getElementById(div);
        this.n = 0;         
        this.divs = [];
        this.wait = false;
        this.lastRan = Date.now();
        this.lastFunc = null;
        this.zbuffer = [];
        this.xbuffer = [];
        this.empty = Array(data.metadata.yrange.length).fill(null);
        this.timespan = 12;
        this.metadata = data.metadata;
        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);
        var diffArr = [];
        for(var i=0; i<data.time.length-1; i++){
            diffArr.push(data.time[i+1]-data.time[i]);
        }
        this.interval = Math.round(Math.min.apply(null, diffArr)*100 / 100);
        if (data.time.length == 1) {
            var values = { 'time': data.time, 'data': data['data'].map(function (x) { return [x] }) };
        } else {
            var values = this.fill_gaps(data.time, data['data'], this.interval, data['data'].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.metadata.localtime == true){
                a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
            }
            return  a;
        });

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

        }
        else{
            label = "[UTC]";
        }

        for (var i = 0; i < data['data'].length; i++) {
            var layout = {
                height: 350,
                xaxis: {
                    title: 'Time ' + label,
                    showgrid: false,
                    linewidth: 2,
                    size: 12,
                    mirror: true,
                },
                yaxis: {
                    title: data.metadata.ylabel || 'km',
                    showgrid: false,
                    linewidth: 2,
                    size: 12,
                    mirror: true,
                },
                titlefont: {
                    size: 16,
                },
                margin: {
                    t: 30,
                }
            };
            var iDiv = document.createElement('div');
            iDiv.id = 'plot-' + i;
            //iDiv.className += iDiv.className ? ' col-lg-6 col-md-6 col-sm-12' : 'col-lg-6 col-md-12 col-sm-12';
            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.metadata.yrange,
                colorscale: this.metadata.colormap || 'Jet',
                transpose: true,
                type: 'heatmap'
            };

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

            layout.title = 'Ch ' + 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.timespan * 1000 * 60 * 60;

        while ((t - div.data[0].x[n]) > timespan) {
            n += 1;
        }
        if(n>720){
            return 720;
        }else{
            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[x.length-1];
            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++) {
                    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;

        while (Math.abs(parseFloat(obj.time[0]) - this.last) > 1.5 * parseFloat(this.interval)) {
            cnt += 1;
            this.last += this.interval;
            var newt = new Date((this.last) * 1000);
            // This condition is used to change from UTC to LT
            if (obj.metadata.localtime == true){
                newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
            }
            this.xbuffer.push(newt);
            for (var i = 0; i < obj['data'].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.metadata.localtime == true){
            t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
        }
        this.xbuffer.push(t);
        for (var i = 0; i < obj['data'].length; i++) {
            this.zbuffer[i].push(obj['data'][i]);
            var div = document.getElementById(this.divs[i]);
            Plotly.relayout(div, {
                title: 'Ch ' + i + ' - ' + t.toLocaleString(),
            });
        }

        if (!this.wait) {
            this.plot();
            this.wait = true;
        } else {
            clearTimeout(this.lastFunc)
            this.lastFunc = setTimeout(function (scope) {
                if ((Date.now() - scope.lastRan) >= 30000) {
                    scope.plot()
                    scope.lastRan = Date.now()
                }
            }, 30000 - (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],
                title: this.metadata.ylabel || 'km',
                linewidth: 2,
                size: 12,
                mirror: true,
            }

        });

        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 }) {
        this.div = document.getElementById(div);
        this.n = 0;
        this.divs = [];
        this.metadata = data.metadata;
        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) {
        for (var i = 0; i < data['data'].length; i++) {
            var layout = {
                margin: {
                    t:30,
                },
                height: 320,
                xaxis: {
                    title: data.metadata.xlabel || 'Velocity',
                    showgrid: false,
                    zeroline: false,
                    linewidth: 2,
                    mirror: true,
                    size: 12,
                },
                yaxis: {
                    title: data.metadata.ylabel || 'km',
                    showgrid: false,
                    linewidth: 2,
                    mirror: 'all',
                    size: 12,
                },
                titlefont: {
                    size: 14
                },
            };
            var iDiv = document.createElement('div');
            iDiv.id = 'plot-' + i;
            iDiv.className += iDiv.className ? ' col-md-5' : 'col-md-5';
            this.n = this.n + 1;
            this.div.appendChild(iDiv);
            this.divs.push(iDiv.id);
            var iDiv = document.createElement('div');
            iDiv.className = 'col-md-1';
            this.div.appendChild(iDiv);
            var trace1 = {
                z: data['data'][i],
                y: data.metadata.yrange,
                x: data.metadata.xrange,
                colorscale: this.metadata.colormap || 'Jet',
                transpose: true,
                type: 'heatmap'
            };
            
            if (this.metadata.zmin) {
                trace1.zmin = this.metadata.zmin
            }
            if (this.metadata.zmax) {
                trace1.zmax = this.metadata.zmax;
            }

            var t = new Date(data.time * 1000);
            if (data.metadata.localtime == true){
                t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
            }
            if ('titles' in data.metadata){
                layout.title = data.metadata.titles[i] + ' ' + t.toLocaleString();
            }else{
                layout.title = 'Ch ' + i + ': ' + 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
            };
            
            var traces = [trace1]
            
            Plotly.newPlot('plot-' + i, traces, 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.metadata.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]);
            
            if ('titles' in obj.metadata){
                var title = obj.metadata.titles[i] + ' ' + t.toLocaleString();
            }else{
                var title = 'Ch ' + i + ': ' + t.toLocaleString();
            }

            Plotly.relayout(div, {
                title: title,
            });

            Plotly.restyle(div, {
                z: [obj['data'][i]],
                x: [obj.xrange]
            }, [0]);
        }
    }
    
    update(data) {
        this.plot(data);
    }
    
    restyle(values) {
        
        var values = list2dict(values);
        var div = document.getElementById(values.plotdiv);

        Plotly.relayout(div, {
            yaxis: {
                title: this.metadata.ylabel || 'km',
                linewidth: 2,
                range: [values.ymin, values.ymax]
            },
            xaxis: {
                title: this.metadata.xlabel || 'Velocity',
                linewidth: 2,
                mirror: true,
                range: [values.xmin, values.xmax]
            }
        });
        
        Plotly.restyle(div, {
            zmin: values.zmin,
            zmax: values.zmax,
            colorscale: values.colormap
        });
    }
}

class ScatterBuffer {
    constructor({ div, data }) {
        this.div = document.getElementById(div);
        this.n = 0;
        this.wait = false;
        this.lastRan = Date.now();
        this.lastFunc = null;
        this.ybuffer = [];
        this.xbuffer = [];
        this.timespan = 12;
        this.metadata = data.metadata;
        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) {

        var traces = [];
        this.last = data.time.slice(-1);
        var diffArr = [];
        for(var i=0; i<data.time.length-1; i++){
            diffArr.push(data.time[i+1]-data.time[i]);
        }
        this.interval = Math.round(Math.min.apply(null, diffArr)*100 / 100);
        
        if (data.time.length == 1) {
            var values = { 'time': data.time, 'data': data['data'] };
        } else {
            var values = this.fill_gaps(data.time, data['data'], this.interval, data['data'].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.metadata.localtime == true){
                a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
            }
            return  a;
        });

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

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

            traces.push(trace);
        }

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

        }
        else{
            label = "[UTC]";
        }

        var layout = {
            height: 300,
            title: t.slice(-1).toLocaleString(),
            font: {
                size: 12,
              },
            xaxis: {
                title: 'Time ' + label,
                size: 12,
                linewidth: 2,
                mirror: true,
            },
            yaxis: {
                title: data.metadata.ylabel || 'dB',
                linewidth: 2,
                mirror: true,
            },
            titlefont: {
                size: 16,
            },
            margin: {
                t: 30,
            }
        };

        if (data.metadata.ymin) { layout.yaxis.range = [data.metadata.ymin, data.metadata.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.timespan * 1000 * 60 * 60;

        while ((t - this.div.data[0].x[n]) > timespan) {
            n += 1;
        }
        if(n>720){
            return 720;
        }else{
            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(this.interval)) {
            cnt += 1;
            this.last += this.interval;
            var newt = new Date((this.last) * 1000);
            // This condition is used to change from UTC to LT
            if (obj.metadata.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.metadata.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['data'][i][0]);
        }
        
        Plotly.relayout(this.div, {
            title: t.toLocaleString(),
        });

        if (!this.wait) {
            this.plot();
            this.wait = true;
        } else {
            clearTimeout(this.lastFunc)
            this.lastFunc = setTimeout(function (scope) {
                if ((Date.now() - scope.lastRan) >= 30000) {
                    scope.plot()
                    scope.lastRan = Date.now()
                }
            }, 30000 - (Date.now() - this.lastRan), this)
        }
    }

    restyle(values) {

        var values = list2dict(values);
        Plotly.relayout(this.div, {
            yaxis: {
                range: [values.ymin, values.ymax],
                title: this.metadata.ylabel || 'dB'
            }

        });
    }
}