(function ($) {
    "use strict";
    $(window).on('elementor/frontend/init', () => {
        elementorFrontend.hooks.addAction('frontend/element_ready/bikys-chart.default', ($scope) => {
            var $chart = $('.myChart', $scope),
                ctx = $chart[0].getContext('2d'),
                labels = $chart.data('labels'),
                asets = $chart.data('asets');
            var $parent = $scope.closest('.bikys-carousel');
            var myChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: labels,
                    datasets: [{
                        data: asets,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2
                    }]
                },
                options: {
                    scales: {
                        r: {
                            pointLabels: {
                                font: {
                                    size: 14,
                                    family: "Heebo",
                                    weight: 500,
                                    color: "black"
                                }
                            },
                            min: 0,
                            max: 10,
                            ticks: {
                                display: false,
                                beginAtZero: true,
                                stepSize: 10 / 3,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                    },
                }
            });

            if ($parent) {
                $parent.on('afterChange', function (event, slick, currentSlide) {
                    myChart.data.datasets[0].data = asets;
                    myChart.update();

                }).on('beforeChange', function (event, slick, currentSlide) {
                    var myArray = createRandomArray(asets.length);
                    myChart.data.datasets[0].data = myArray;
                    myChart.update();
                })
            }

            function createRandomArray(n) {
                var arr = [];

                for (var i = 0; i < n; i++) {
                    arr.push(0);
                }

                return arr;
            }

        });
    });


})(jQuery);
