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);
    }

    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) { return new Date(x*1000); });
        
        for (var i = 0; i < data[this.key].length; i++){
            var layout = {
                xaxis: {
                  title: 'Time',
                  showgrid: false,
                },
                yaxis: {
                  title: 'km',
                  showgrid: false,
                },
                titlefont: {
                    size: 14,
                }
            };
            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 || 'Viridis',
                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'], 
                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;
        
        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-parseFloat(interval))>0.5){
                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 = [];
    }

    update(obj){
        
        // fill data gaps
        var cnt = 0;
        while (Math.abs(parseFloat(obj.time[0])-this.last-parseFloat(obj.interval))>0.5){
            cnt += 1;
            this.last += obj.interval;
            var newt = new Date((this.last)*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.xbuffer.push(t);
        for (var i = 0; i < obj[this.key].length; i++){
            this.zbuffer[i].push(obj[this.key][i]);
            // update title
            var div = document.getElementById(this.divs[i]);
            Plotly.relayout(div, {
                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)
        }
    }
}

class Pcolor{
    constructor({div, data, props}){
        this.div = document.getElementById(div);
        this.n = 0
        this.divs = [];
        this.props = props;
        this.setup(data);
    }

    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],
                },
                yaxis: {
                  title: 'km',
                  showgrid: false,
                },
                xaxis2: {
                    title: 'dB',
                    domain: [0.75, 1],
                    ticks: 'outside',
                  },
                titlefont: {
                    size: 14,
                }
            };
            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 || 'Viridis',
                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);
            layout.title = 'Channel ' + i + ': ' + data.noise[i]+'dB - ' + t.toLocaleString();
            var conf = {
                modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'], 
                displaylogo: false, 
                showTips: true 
            };
            Plotly.newPlot('plot-'+i, [trace1, trace2], layout, conf);
        }
    }

    plot(obj){
        
        // add new data to plots and empty buffers
        console.log('Plotting...');
        var t = new Date(obj.time[0]*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]);
        }
    }
}

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);
    }

    setup(data){

        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) { return new Date(x*1000); });
        
        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
            };

            traces.push(trace);
        }
        var title = this.props.title || ''
        var layout = {
            // autosize: false,
            // width: 800,
            // height: 400,
            title: title + ' - ' + t.slice(-1).toLocaleString(),
            xaxis: {
              title: 'Time',
              linecolor: 'black',
            },
            yaxis: {
              title: this.props.ylabel || 'dB',
              linecolor: 'black',
            },
            titlefont: {
                size: 14,
            }
        };

        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'], 
            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-parseFloat(interval))>0.5){
                cnt += 1;
                last = last+interval;
                x.push(last);
                for (var j = 0; j < N; j++){
                    z[j].push(null);
                }
                // Avoid infinite loop
                if (cnt==100){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 = [];
    }

    update(obj){
        
        // fill data gaps
        var cnt = 0;
        while (Math.abs(parseFloat(obj.time[0])-this.last-parseFloat(obj.interval))>0.5){
            cnt += 1;
            this.last += obj.interval;
            var newt = new Date((this.last)*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.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)
        }
    }
}