var yearList = [];

function makeChart(type, divId, dataGraph, optionsGraph) {
    var canvas = document.getElementById(divId);
    var ctx = canvas.getContext("2d");

    ctx.fillText("Source: European Investment Bank - EIBIS", 10, 90);
    if (optionsGraph.scales.xAxes[0].ticks.max == null) {
        delete optionsGraph.scales.xAxes[0].ticks.max;
    }

    if (optionsGraph.scales.xAxes[0].ticks.min == null) {
        delete optionsGraph.scales.xAxes[0].ticks.min;
    }

    if (optionsGraph.scales.yAxes[0].ticks.max == null)
        delete optionsGraph.scales.yAxes[0].ticks.max;

    if (optionsGraph.scales.yAxes[0].ticks.min == null)
        delete optionsGraph.scales.yAxes[0].ticks.min;

    return new Chart(ctx, {
        type: type,
        data: dataGraph,
        options: optionsGraph
    });
}

$('.divform select').parent().addClass('padding-right-5');
$(document).ready(function () {
    if ($(window).width() < 992) {
        $('#display-left-menu').trigger('click');
        $('#leftMenu').toggleClass('menu-hide');
        $("#display-left-menu .cog").removeClass("hidden");
        $("#display-left-menu .times").addClass("hidden");
        $(".button-download-hidden").each(function () {
            $(this).removeClass("hidden");
        });
    }
});

function makeTable(divId, dataHeader, dataTable) {

    var table = $("#" + divId);

    table.empty();

    var headStr = "<thead>";

    var indicatorHeadStr = "<tr>";
    var descriptionHeadStr = "<tr>";
    var columnsHeadStr = "<tr>";

    if (dataHeader) {

        dataHeader.classicHeaders.forEach(function (head) {
            indicatorHeadStr += "<th class='th-invisible' />";
            descriptionHeadStr += "<th class='th-invisible' />";
            columnsHeadStr += "<th>" + head + "</th>";
        }, this);

        dataHeader.graphHeaders.forEach(function (graphHeader) {
            var values = graphHeader.columns;

            indicatorHeadStr += "<th class='th-indicator' colspan=" + values.length + ">" + graphHeader.indicator + "</th>";
            descriptionHeadStr += "<th class='th-description' colspan=" + values.length + ">" + graphHeader.description + "</th>";

            values.forEach(function (value) {
                columnsHeadStr += "<th>" + value + "</th>";
            }, this);
        }, this);
    }

    indicatorHeadStr += "</tr>";
    descriptionHeadStr += "</tr>";
    columnsHeadStr += "</tr>";

    headStr += indicatorHeadStr + descriptionHeadStr + columnsHeadStr + "</thead>";

    bodyStr = "<tbody>";

    if (dataTable) {
        dataTable.forEach(function (line) {
            var lineStr = "<tr>";
            lineStr += "<td class='td-text'>" + line.country + "</td>";
            lineStr += "<td class='td-number'>EIBIS " + (line.year) + "</td>";
            lineStr += "<td class='td-text'>" + line.sector + "</td>";
            lineStr += "<td class='td-text'>" + line.size + "</td>";

            if (line.values) {
                (line.values).forEach(function (value) {
                    // lineStr += "<td class='td-number'>" + Math.round(value * 100) / 100 + "</td>";
                    lineStr += "<td class='td-number'>" + getValueIfNotNull(value) + "</td>";
                }, this);
            }

            lineStr += "</tr>";

            bodyStr += lineStr;
        }, this);
    }

    bodyStr += "</tbody>";

    table.append(headStr + bodyStr);
}

function getValueIfNotNull(value) {
    if (value === null) {
        return "."
    }
    return Math.round(value * 100) / 100
}


function topicSelected() {
    var topic = $("#topicSelector").val();
    $('#indicatorSelector').find('option').remove().end();

    $.ajax({
        type: "GET",
        url: "/eibis/graph/indicators?t=" + topic,
        success: function (data) {
            for (var t in data) {
                if (data[t] === 'Factors impacting long-term investment decisions: availability of staff') {
                    $('#indicatorSelector').append("<option selected='true'>" + data[t] + "</option>");
                } else {
                    $('#indicatorSelector').append("<option>" + data[t] + "</option>");
                }
            }
            updateGraph();
        }
    });
}

function getGraphParametersURL() {

    var topic = $("#topicSelector").val();
    var indicator = $("#indicatorSelector").val();
    var comparison = $("input[type=radio][name=comparisonRadio]:checked").val();

    url = "?t=" + topic + "&i=" + indicator;

    if (comparison === "cc") {
        var year = $("#yearCC").val();
        var dataSet = $("input[type=radio][name=datasetCCRadio]:checked").val();
        var sector = $("#sectorCC").val();
        var size = $("#sizeCC").val();

        url += "&y=" + year + "&d=" + dataSet;

        if (dataSet == "sector")
            url += "&se=" + sector;
        if (dataSet == "size")
            url += "&si=" + size;
    } else if (comparison === "wc") {
        var country = $("#countryWC").val();
        var year = $("#yearWC").val();
        var dataSet = $("input[type=radio][name=datasetWCRadio]:checked").val();
        var average = $("#averageWC").is(':checked');

        url += "&c=" + country + "&y=" + year + "&d=" + dataSet + "&a=" + average;

    } else if (comparison === "ts") {
        var country = $("#countryTS").val();
        var year = $("#yearTS").val();
        var dataSet = $("input[type=radio][name=datasetTSRadio]:checked").val();
        var comparator = $("#comparatorTS").val();
        url += "&c=" + country + "&y=" + year + "&d=" + dataSet + "&cp=" + comparator;
    }

    return url.replace("%", "%25");
}

function getDownloadParametersURL() {

    url = "?";

    var indicators = $("#indicatorSelector").val();
    if (indicators != null)
        for (i = 0; i < indicators.length; i++) {
            url += "&i=" + indicators[i];
        }


    var countries = $("#country").val();
    if (countries != null)
        for (i = 0; i < countries.length; i++) {
            url += "&c=" + countries[i];
        }

    var years = $("#year").val();
    if (years != null)
        for (i = 0; i < years.length; i++) {
            url += "&y=" + years[i];
        }

    var subGroups = $("#subgroup").val();
    if (subGroups != null)
        for (i = 0; i < subGroups.length; i++) {
            url += "&s=" + subGroups[i];
        }

    return url.replace("%", "%25");
}

var chart;

function updateDataset(e, datasetIndex, labelDiv) {

    if ($(labelDiv).hasClass("data-not-visible")) {
        $(labelDiv).removeClass("data-not-visible");
    } else {
        $(labelDiv).addClass("data-not-visible");
    }

    var index = datasetIndex;
    var meta = chart.getDatasetMeta(index);

    meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;

    chart.update();
};

/*
var ajax_inprocess = false;

$(document).ajaxStart(function() {
	ajax_inprocess = true;
});

$(document).ajaxStop(function() {
	ajax_inprocess = false;
});
*/

var currentRequest = null;

function updateGraph() {

    $("#graphDiv").empty()
        .append("<div class='text-center loading'><h2><i class='fa fa-spinner fa-spin'></i> Loading ...</h2></div>");

    $("#graphTitle").empty();
    $("#graphLegend").empty();
    $("#graphDescription").empty();
    $("#graphSource").empty();
    $("#graphNote").empty();

    var comparison = $("input[type=radio][name=comparisonRadio]:checked").val();

    var url = "/eibis/graph/" + comparison;

    var param = getGraphParametersURL();

    url += param;

    currentRequest = $.ajax({
        type: "GET",
        url: url,
        beforeSend: function () {
            if (currentRequest != null) {
                currentRequest.abort();
                $("#graphTitle").empty();
                $("#graphDiv").empty()
                    .append("<div class='text-center'><h2><i class='fa fa-spinner fa-spin'></i> Loading ...</h2></div>");
            }
        },
        success: function (result) {


            if (!result) {

                $("#graphDiv").empty()
                    .append("<div class='text-center'><h1>There is no data for these filters</h1></div>");

                $(".export-btn").each(function () {
                    this.disabled = true;
                });

                $("input#datasetTSRadioSector").attr("disabled", true);
                $("input#datasetTSRadioSize").attr("disabled", true);
            } else {

                if (result.data != null && result.data.datasets != null && result.data.datasets.length > 0 && checkValidityData(result.data.datasets)) {

                    result.options.tooltips.callbacks = {
                        label: function (tooltipItem, data) {
                            return "  " + data.datasets[tooltipItem.datasetIndex].label + ": " + tooltipItem.yLabel + result.options.tooltips.endString;
                        }
                    }

                    result.options.legendCallback = function (chart) {
                        var legendHtml = [];
                        legendHtml.push('<ul class="chart-legend">');

                        for (var i = 0; i < chart.data.datasets.length; i++) {
                            if (chart.data.datasets[i].label) {
                                legendHtml.push('<li>');
                                legendHtml.push('<div class="chart-legend-box" onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', this)" style="background-color:' + chart.data.datasets[i].backgroundColor + '; border:2px solid ' + chart.data.datasets[i].borderColor + ';"></div>');
                                legendHtml.push('<span class="chart-legend-label" onclick="updateDataset(event, ' + '\'' + chart.legend.legendItems[i].datasetIndex + '\'' + ', this)">' + chart.data.datasets[i].label + '</span>');
                                legendHtml.push('</li>');
                            }
                        }
                        legendHtml.push('</ul>');
                        return legendHtml.join("");
                    };

                    $("#graphTitle").empty()
                        .append(result.title);

                    $("#graphDiv").empty()
                        .append("<canvas id='graphCanvas' style='padding: 15px;'></canvas>");


                    chart = makeChart(result.type, "graphCanvas", result.data, result.options);

                    $("#graphDescription").html("<h1>Description</h1>" + result.description);

                    if (result.stacked) {
                        if (!$("#euAverageDiv").hasClass("hidden-average")) {
                            $("#euAverageDiv").addClass("hidden-average");
                            setTimeout(function () {
                                $("#euAverageDiv").css('display', 'none');
                            }, 1000);
                        }

                        if (!$("#datasetTSAvg").hasClass("hidden")) {
                            $("#datasetTSAvg").addClass("hidden");
                        }

                        $("input#datasetTSRadioSector").attr("disabled", true);
                        $("input#datasetTSRadioSize").attr("disabled", true);
                    } else {
                        if ($("#euAverageDiv").hasClass("hidden-average")) {
                            $("#euAverageDiv").css('display', 'block');
                            $("#euAverageDiv").removeClass("hidden-average");
                        }

                        if ($("#datasetTSAvg").hasClass("hidden")) {
                            $("#datasetTSAvg").removeClass("hidden");
                        }

                        $("input#datasetTSRadioSector").attr("disabled", false);
                        $("input#datasetTSRadioSize").attr("disabled", false);
                    }


                    $("#linkGraphExportText").val($("#linkGraphExportLinkApp").val() + "graph" + param + "&co=" + comparison);

                    $("#graphSource").html("<p><bold>Source</bold>: EIB investment survey, European Investment Bank</p>");
                    $("#graphNote").html("<p><bold>Note</bold>: For questions referring to the last financial year, the reference year is the previous calendar year. For example, data reported in EIBIS 2021 would in that case refer to the year 2020.</p>");

                    $(".export-btn").each(function () {
                        this.disabled = false;
                    });

                } else {
                    $("#graphDiv").empty()
                        .append("<div class='text-center'><h1>There is no data for these filters</h1></div>");

                    $(".export-btn").each(function () {
                        this.disabled = true;
                    });

                    $("input#datasetTSRadioSector").attr("disabled", true);
                    $("input#datasetTSRadioSize").attr("disabled", true);
                }
            }
        },
        error: function (result) {
            $("#graphTitle").empty()
                .append("Internal error");

            $("#graphDiv").empty()
                .append("<div class='text-center'><h2>The server failed to retrieve the graph</h2></div>");

            $(".export-btn").each(function () {
                this.disabled = true;
            });

            $("input#datasetTSRadioSector").attr("disabled", true);
            $("input#datasetTSRadioSize").attr("disabled", true);
        }
    });

}

function checkValidityData(dataSet) {
    var validity = true;
    if (dataSet == null) {
        validity = false;
    }

    dataSet.forEach(item => {
        if (item.data.length == 0) {
            validity = false
        }
    })

    return validity;
}

function updateTable() {
    $("#tableDiv").empty()
        .append("<div class='text-center'><h2><i class='fa fa-spinner fa-spin'></i> Loading ...</h2></div>");

    var url = "/eibis/download/table/";

    url += getDownloadParametersURL();

    currentRequest = $.ajax({
        type: "GET",
        url: url,
        beforeSend: function () {
            if (currentRequest != null) {
                currentRequest.abort();
                $("#tableTitle").empty();
                $("#tableDiv").empty()
                    .append("<div class='text-center'><h2><i class='fa fa-spinner fa-spin'></i> Loading ...</h2></div>");
            }
        },
        success: function (result) {
            if (!result) {
                $("#tableDiv").empty()
                    .append("<div class='text-center'><h1>There is no data for these filters</h1></div>");

                $(".export-btn").each(function () {
                    this.disabled = true;
                });
            } else {
                $("#tableDiv").empty()
                    .append("<table id='tableTable' class='table table-striped table-hover'></table>");

                makeTable("tableTable", result.header, result.data);

                $('#tableTable').DataTable();

                $("#linkDownloadExportText").val($("#linkDownloadExportLinkApp").val() + "download" + getDownloadParametersURL());

                $(".export-btn").each(function () {
                    this.disabled = false;
                });
            }
        },
        error: function (result) {
            $("#tableDiv").empty()
                .append("<div class='text-center'><h2>The server failed to retrieve the graph</h2></div>");

            $(".export-btn").each(function () {
                this.disabled = true;
            });
        }
    });

}

$(function () {
    var clipboard = new Clipboard('.btn-copy-clipboard');

    var yetVisited = false;

    $('.selectpicker').selectpicker();

    var yearsElement = document.getElementById("years-container");
    if (yearsElement != null) {
        yearList = JSON.parse(yearsElement.getAttribute("data-years"));
    }

    $("#yearTS").ionRangeSlider({
        type: "int",
        min: yearList[0],
        max: yearList[yearList.length - 1],
        from: yearList[0],
        to: yearList[yearList.length - 1],
        values_separator: " → ",
        grid: false,
        step: 1,
        onStart: function (data) {
            $("#yearTS").val(`${yearList[0]};${yearList[yearList.length - 1]}`);
        },
        onFinish: function (data) {
            updateGraph();
        }
    });

    $('input[type=radio][name=comparisonRadio]').change(function () {
        $(this).tab('show');
        updateGraph();
    });

    $('input[type=radio][name=datasetCCRadio]').change(function () {
        $(this).tab('show');
        updateGraph();
    });

    $('input[type=radio][name=datasetWCRadio]').change(function () {
        updateGraph();
    });

    $('input[type=radio][name=datasetTSRadio]').change(function () {
        $(this).tab('show');
        updateGraph();
    });

    $('.btn-copy-clipboard').click(function () {
        var snackbar = $("#snackbar-copy");

        snackbar.html("Text add in your presspaper");
        snackbar.addClass("show");

        setTimeout(function () {
            snackbar.removeClass("show");
        }, 3000);
    });


    $("#exportGraphFileButton").click(function () {
        $('#fileGraphExportModal').modal('hide');

        var typeFile = $("#typeGraphFile").val();
        var comparison = $("input[type=radio][name=comparisonRadio]:checked").val();
        var url = "/eibis/exportGraph/" + typeFile + "/" + comparison;

        url += getGraphParametersURL() + "&n=" + $("#nameGraphFile").val();

        var exportLink = document.getElementById('exportLink');
        exportLink.href = url;

        var cookie = $.cookie("userId");

        if (cookie == null || cookie == undefined) {
            $('#userInfoModal').modal('show');
        } else {
            exportLink.click();
            exportLink.href = "";
        }

    });

    $("#exportDownloadFileButton").click(function () {

        $('#fileDownloadExportModal').modal('hide');
        console.log("Whoooopty");
        var typeFile = $("#typeDownloadFile").val();
        var url = "/eibis/exportDownload/" + typeFile;

        url += getDownloadParametersURL() + "&n=" + $("#nameDownloadFile").val();

        var exportLink = document.getElementById('exportLink');
        exportLink.href = url;

        var cookie = $.cookie("userId");

        if (cookie == null || cookie == undefined) {
            $('#userInfoModal').modal('show');
        } else {
            exportLink.click();
            exportLink.href = "";
        }

    });


    $("#exportGraphImageButton").click(function () {
        $('#imageGraphExportModal').modal('hide');
        $('#loadingModal').modal('show');

        html2canvas($("#graphDisplay"), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL();

                canvas.toBlob(function (blob) {

                    var title = $("#nameGraphImageFile").val();
                    if (title === "" || title === null)
                        title = "data";

                    saveAs(blob, title + ".png");

                }, "image/png");

                $('#loadingModal').modal('hide');
            }
        });
    });

    $("#exportGraphImageLink").click(function () {
        $('#exportImageDownloadModal').modal('hide');
    });


    $("#exportDownloadImageButton").click(function () {
        $('#imageDownloadExportModal').modal('hide');
        $('#loadingModal').modal('show');

        var tcanvas;

        html2canvas($("#tableDiv"), {
            onrendered: function (canvas) {
                var img = canvas.toDataURL();

                canvas.toBlob(function (blob) {

                    var title = $("#nameDownloadImageFile").val();
                    if (title === "" || title === null)
                        title = "data";

                    saveAs(blob, title + ".jpg");
                }, "image/jpg");

                $('#loadingModal').modal('hide');
            }
        });
    });

    $("#userInfoSkipButton").click(function () {
        $('#userInfoModal').modal('hide');

        $.cookie("userId", "", {expires: 30});

        var exportLink = document.getElementById('exportLink');
        exportLink.click();
        exportLink.href = "";
    });


    $("#userInfoValidButton").click(function () {
        $('#userInfoModal').modal('hide');
        $('#loadingModal').modal('show');

        var url = "/eibis/user/download?n=" + $("#userInfoName").val()
            + "&e=" + $("#userInfoEmail").val()
            + "&o=" + $("#userInfoOrganisation").val()
            + "&s=" + $("#userInfoSector").val()
            + "&u=" + $("input[name=userInfoUpdate]:checked").val();

        currentRequest = $.ajax({
            type: "GET",
            url: url,
            success: function (result) {

                $.cookie("userId", result, {expires: 30});
                $('#loadingModal').modal('hide');

                var exportLink = document.getElementById('exportLink');
                exportLink.click();
                exportLink.href = "";
            },
            error: function (result) {
                $('#loadingModal').modal('hide');

                var exportLink = document.getElementById('exportLink');

                exportLink.click();
                exportLink.href = "";
            }
        });
    });


    $("#display-left-menu").click(function () {
        if ($("#leftMenu").hasClass("menu-hide")) {
            $("#leftMenu").removeClass("menu-hide");

            $("#graphDisplay").removeClass("col-lg-12 col-md-12");
            $("#graphDisplay").addClass("col-lg-9 col-md-9");

            $("#tableDisplay").removeClass("col-lg-12 col-md-12");
            $("#tableDisplay").addClass("col-lg-9 col-md-9");

            $("#display-left-menu .times").removeClass("hidden");
            $("#display-left-menu .cog").addClass("hidden");

            $(".button-download-hidden").each(function () {
                $(this).addClass("hidden");
            });
        } else {
            $("#leftMenu").addClass("menu-hide");

            $("#graphDisplay").removeClass("col-lg-9 col-md-9");
            $("#graphDisplay").addClass("col-lg-12 col-md-12");

            $("#tableDisplay").removeClass("col-lg-9 col-md-9");
            $("#tableDisplay").addClass("col-lg-12 col-md-12");

            $("#display-left-menu .cog").removeClass("hidden");
            $("#display-left-menu .times").addClass("hidden");
            $(".button-download-hidden").each(function () {
                $(this).removeClass("hidden");
            });

        }
    });

    $(".closeButtonMessage a").click(function (event) {
        event.preventDefault();
        $(".closeButtonMessage").addClass("hidden");
    });
});