/* eslint-disable */
window.getSparkLinesImg = data => {
    var finalWidth = 100;
    var finalHeight = 18;
    var scaling = 6;

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 1;

    canvas.width = finalWidth * scaling;
    canvas.height = finalHeight * scaling;
    ctx.scale(scaling, scaling);

    var minValue = Math.min.apply(null, data.values);
    var maxValue = Math.max.apply(null, data.values);
    var dataLength = data.values.length;

    if (dataLength == 0) {
        return;
    }

    var yAxis = finalHeight - data.zeroPoint;

    var newData = [];

    var maxX = 0;

    for (var i = 0; i < dataLength; i++) {
        var newX = i;
        var newY = data.values[i];
        if (newX > maxX) {
            maxX = newX;
        }
        if (i > 0) {
            var x1 = i - 1;
            var y1 = data.values[i - 1];
            var addedX = sqSparklinesZeroPointNew(x1, y1, newX, newY, yAxis);
            if (addedX > 0 && addedX < dataLength) {
                if (addedX > x1 && addedX < newX) {
                    newData.push([addedX, yAxis]);
                }
            }
        }
        newData.push([newX, newY]);
    }

    var recalculatedData = [];

    dataLength = newData.length;

    for (var i = 0; i < newData.length; i++) {
        var newX = Math.round(sqSparklinesMap(newData[i][0], 0, maxX, 0, finalWidth));
        var newY = finalHeight - newData[i][1];
        recalculatedData.push([newX, newY]);
    }

    var lastX = 0;
    var lastY = 0;
    if (recalculatedData.length > 0) {
        var lastX = recalculatedData[0][0];
        var lastY = recalculatedData[0][1];
    }
    var aboveZero = true;

    if (maxValue < yAxis) {
        aboveZero = false;
    }

    if (lastY > yAxis) {
        aboveZero = false;
    }

    for (var i = 1; i < recalculatedData.length; i++) {

        // sparkline
        var newX = recalculatedData[i][0];
        var newY = recalculatedData[i][1];
        if (newY <= yAxis) {
            aboveZero = true;
        } else {
            aboveZero = false;
        }

        ctx.beginPath();
        ctx.moveTo(lastX + 0.5, lastY - 0.5);
        ctx.lineTo(newX + 0.5, newY - 0.5);
        if (aboveZero) {
            ctx.strokeStyle = "#030077";
        } else {
            ctx.strokeStyle = "#c10000";
        }
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.moveTo(lastX + 0.5, yAxis - 0.5);
        ctx.lineTo(lastX + 0.5, lastY - 0.5);
        ctx.lineTo(newX + 0.5, newY - 0.5);
        ctx.lineTo(newX + 0.5, yAxis - 0.5);
        if (aboveZero) {
            ctx.fillStyle = '#04aeec';
        } else {
            ctx.fillStyle = '#ff6961';
        }
        ctx.fill();
        ctx.closePath();

        lastX = newX;
        lastY = newY;
    }

    if ("oos" in data) {
        // oos backgrounds
        for (var i = 0; i < data.oos.length; i++) {
            var oosX1 = Math.round(sqSparklinesMap(data.oos[i][0], 0, maxX, 0, finalWidth)) + 0.5;
            var oosX2 = Math.round(sqSparklinesMap(data.oos[i][1], 0, maxX, 0, finalWidth)) + 0.5;
            ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
            ctx.fillRect(oosX1, 0.5, oosX2 - oosX1, finalHeight - 0.5);
        }
    }


    if (minValue < yAxis && maxValue > yAxis) {
        // zero line
        ctx.strokeStyle = "#7a878f";
        ctx.beginPath();
        ctx.moveTo(0.5, yAxis - 0.5);
        ctx.lineTo(finalWidth + 0.5, yAxis - 0.5);
        ctx.stroke();
    }

    renderedData = canvas.toDataURL();

    return renderedData;
}

window.sqGridSparklines = function(grid, rowIndex, colIndex, row, params) {
    /* widget compatible with sq-grid v.2 */

    var dataRaw = "";
    if ("data" in params) {
        dataRaw = params["data"];
    }

    if (dataRaw == "") {
        return;
    }

    var renderedData = grid.getCellCustomData(rowIndex, colIndex, "cellsImageValues");
    var oldDataRow = grid.getCellCustomData(rowIndex, colIndex, "dataRaw");
    if (renderedData == null || oldDataRow != dataRaw) {
        var data = {};
        try {
            data = JSON.parse(dataRaw);
        } catch (e) {
            return;
        }

        var renderedData = getSparkLinesImg(data);

        grid.setCellCustomData(rowIndex, colIndex, "cellsImageValues", renderedData);
        grid.setCellCustomData(rowIndex, colIndex, "dataRaw", dataRaw);
    }

    /************/

    IncrementalDOM.elementOpen('div', null, null, "class", "grid-widget-sparklines");
    IncrementalDOM.elementOpen('img', null, null, "src", renderedData, "width", "100", "height", "18");
    IncrementalDOM.elementClose('img');
    IncrementalDOM.elementClose('div');
}

function sqSparklinesMap(num, in_min, in_max, out_min, out_max) {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

function sqSparklinesZeroPointNew(x1, y1, x2, y2, zPoint) {
    var a = (y2 - y1) / (x2 - x1);
    var b = y1 - (a * x1);
    return (zPoint - b) / a;
}