var realOffset = 0;

const swiper = new Swiper('.swiper-container.chart', {
    direction: 'horizontal',
    loop: false,
    grabCursor: true,
    initialSlide: 2,
    slidesPerView: 1,
    observer: true,
    watchOverflow: true,
    resizeObserver: true,
    watchSlidesVisibility: true,
    roundLengths: true,
    autoHeight: true,
    spaceBetween: 300
});

let checkButtons = function () {
    $('#ll,#l').css('cursor', realOffset === 0 ? 'not-allowed' : 'pointer');
    $('#rr,#r').css('cursor', realOffset === numberOfObj - 1 ? 'not-allowed' : 'pointer');
};

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

    if (realOffset <= 0) return;

    realOffset--;

    if (numberIndex[realOffset - 1] && realOffset < numberOfObj - 2) {

        swiper.prependSlide(
            '<div role="group" class="swiper-slide is--chart">' +
            '<canvas style="min-height: 500px; width: 100%;" id="' + numberIndex[realOffset - 1] + '"></canvas>' +
            '</div>'
        );

        createChart(realOffset - 1);

        setTimeout(function () {

            if (swiper.slides.length > 3) {
                swiper.removeSlide(3);
            }

        }, 150);
    }

    swiper.slideTo(swiper.activeIndex - 1, 100, false);

    checkButtons();
});

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

    if (realOffset >= numberOfObj - 1) return;

    realOffset++;

    if (numberIndex[realOffset + 1] && realOffset > 1) {

        swiper.appendSlide(
            '<div role="group" class="swiper-slide is--chart">' +
            '<canvas style="min-height: 500px; width: 100%;" id="' + numberIndex[realOffset + 1] + '"></canvas>' +
            '</div>'
        );

        createChart(realOffset + 1);

        if (realOffset >= 2) {

            setTimeout(function () {

                if (swiper.slides.length > 0) {
                    swiper.removeSlide(0);
                }

            }, 50);
        }
    }

    setTimeout(function () {
        swiper.slideTo(swiper.activeIndex + 1, 100, false);
    }, 150);

    checkButtons();
});

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

    if (realOffset <= 0) return;

    realOffset = 0;

    let curSlides = swiper.slides.length;

    var reversed = [...slidersArray];

    swiper.prependSlide([...reversed].reverse());

    for (var j = 0; j <= 2; j++) {

        if (j < numberOfObj) {
            createChart(j);
        }
    }

    swiper.slideTo(0, 100, false);

    setTimeout(function () {

        for (var j = curSlides; j <= curSlides + 3; j++) {

            if (swiper.slides[j]) {
                swiper.removeSlide(j);
            }
        }

    }, 150);

    checkButtons();
});

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

    if (realOffset >= numberOfObj - 1) return;

    realOffset = numberOfObj - 1;

    let curSlides = swiper.slides.length;

    swiper.appendSlide(slidersArray2);

    for (var j = curSlides - 1; j >= 0; j--) {
        swiper.removeSlide(j);
    }

    for (var j = 1; j <= 3; j++) {

        if (numberOfObj - j >= 0) {
            createChart(numberOfObj - j);
        }
    }

    swiper.slideTo(2, 100, false);

    checkButtons();
});

var planningEnd = "";
var data;
var json = [];
var numberIndex = [];
var numberOfObj;

var dataHandler = function (data) {

    numberOfObj = Object.keys(data).length;

    numberIndex = Array.from(
        { length: numberOfObj },
        (_, i) => i + 1
    );

    console.log(numberIndex, 'numberIndex');
    console.log(numberOfObj, 'numberOfObj');
};

var slidersArray = [];
var slidersArray2 = [];

var createSlides = function () {

    $("canvas").each(function () {
        this.remove();
    });

    slidersArray = [];
    slidersArray2 = [];

    var i = 0;

    for (; numberIndex[i] && i <= 2;) {

        slidersArray.push(
            '<div role="group" class="swiper-slide is--chart">' +
            '<canvas style="min-height: 500px; width: 100%;" id="' + numberIndex[i] + '"></canvas>' +
            '</div>'
        );

        i++;
    }

    for (i = numberOfObj - 3; i < numberOfObj; i++) {

        if (numberIndex[i]) {

            slidersArray2.push(
                '<div role="group" class="swiper-slide is--chart">' +
                '<canvas style="min-height: 500px; width: 100%;" id="' + numberIndex[i] + '"></canvas>' +
                '</div>'
            );
        }
    }
};

const charts = {};

var createChart = function (idx) {

    var i = idx;

    const canvas = document.getElementById(numberIndex[i]);

    if (!canvas) {
        console.error('Canvas not found', numberIndex[i]);
        return;
    }

    var ctx = canvas.getContext('2d');

    var key = Object.keys(json)[i];

    if (!key) return;

    if (charts[idx]) {
        charts[idx].destroy();
    }

    var colorMap = {};

    var dynamicColors = function () {

        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);

        return "rgb(" + r + "," + g + "," + b + ")";
    };

    var coloR = [];

    var data = Object.keys(json[key])
        .sort(function (a, b) {
            return json[key][b] - json[key][a];
        })
        .map(function (company) {

            if (colorMap[company] === undefined) {
                colorMap[company] = dynamicColors();
            }

            coloR.push(colorMap[company]);

            return json[key][company];
        });

    var date = new Date(Date.parse(key));

    var options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    };

    var dateStr = date.toLocaleDateString("ru-RU", options);

    Chart.defaults.font.family = "'RF Dewi Extended', sans-serif";
    Chart.defaults.font.size = 16;
    Chart.defaults.color = "#fff";

    const lastJsonKey = Object.keys(json)[Object.keys(json).length - 1];

    const maxValue = lastJsonKey
        ? Math.max(...Object.values(json[lastJsonKey]))
        : 1;

    charts[idx] = new Chart(ctx, {

        type: 'bar',

        data: {

            labels: Object.keys(json[key]).sort(function (a, b) {
                return json[key][b] - json[key][a];
            }),

            datasets: [{
                label: 'Ставка',
                data: data,
                borderRadius: 24,
                categoryPercentage: 1.0,
                barPercentage: 1.0,
                backgroundColor: ['#98fcff'],
                borderColor: ['transparent'],
                borderWidth: 0
            }]
        },

        options: {

            responsive: true,
            maintainAspectRatio: false,
            indexAxis: 'y',
            animation: false,
            barThickness: 20,
            categoryPercentage: 0.4,
            barPercentage: 0.4,

            scales: {

                y: {
                    beginAtZero: true,
                    ticks: {
                        autoSkip: false
                    }
                },

                x: {
                    max: maxValue || 1,
                    beginAtZero: true,
                    ticks: {
                        autoSkip: true,
                        minRotation: 25
                    }
                }
            },

            plugins: {
                title: {
                    display: Date.parse(planningEnd) >= Date.parse("2021-05-31"),
                    text: dateStr
                }
            }
        }
    });
};