(function ($) {
    var WidgetElements_DynamicCharts = function ($scope, $) {
		let elementSettings = dceGetElementSettings($scope);
		let labels;
		let chart = $scope.find('#myChart');
		let useRandomColors = Boolean( elementSettings.background_random_colors );
		let backgroundColors = [];
		let borderColors = [];
		let color;
		let colors = [];
		let backgroundOpacity;
		let borderOpacity;
		let randomColors = [];
		let options;
		let scales;
		let background_data_temp = [];
		let background_data = elementSettings.background_data;
        const ctx = chart[0].getContext('2d');

		if ( elementorFrontend.isEditMode() && ! useRandomColors ) {
			background_data.models.forEach( function(item){
				background_data_temp.push( item.attributes );
			});
			background_data = background_data_temp;
		}

		// Set labels and data for different inputs
		if( 'csv' === elementSettings.input ) {
			labels = chart.data('chart-labels');
			data = chart.data('chart-data');
		} else if ( 'simple' === elementSettings.input ) {
			labels = elementSettings.labels.split(',');
			data = elementSettings.data.split(',');
		}

		if( useRandomColors ) {
			randomColors = {
				dynamic1: '#ff577a',
				dynamic2: '#33b8b7',
				dynamic3: '#ffc858',
				dynamic4: '#c2c4c8',
				dynamic5: '#008efa',
				indianred: "#cd5c5c",
				cadetblue: "#5f9ea0",
				cyan: "#00ffff",
				darkblue: "#00008b",
				darkcyan: "#008b8b",
				darkgoldenrod: "#b8860b",
				darkgreen: "#006400",
				darkgrey: "#a9a9a9",
				darkkhaki: "#bdb76b",
				darkmagenta: "#8b008b",
				darkolivegreen: "#556b2f",
				darkorange: "#ff8c00",
				darkorchid: "#9932cc",
				darkred: "#8b0000",
				darksalmon: "#e9967a",
				darkseagreen: "#8fbc8f",
				brown: "#a52a2a",
				darkslateblue: "#483d8b",
				darkslategrey: "#2f4f4f",
				darkturquoise: "#00ced1",
				darkviolet: "#9400d3",
				deeppink: "#ff1493",
				deepskyblue: "#00bfff",
				dimgray: "#696969",
				dimgrey: "#696969",
				dodgerblue: "#1e90ff",
				firebrick: "#b22222",
				floralwhite: "#fffaf0",
				forestgreen: "#228b22",
				gainsboro: "#dcdcdc",
				ghostwhite: "#f8f8ff",
				gold: "#ffd700",
				goldenrod: "#daa520",
				greenyellow: "#adff2f",
				grey: "#808080",
				honeydew: "#f0fff0",
				hotpink: "#ff69b4",
				indigo: "#4b0082",
				ivory: "#fffff0",
				khaki: "#f0e68c",
				lavender: "#e6e6fa",
				lavenderblush: "#fff0f5",
				lawngreen: "#7cfc00",
				lemonchiffon: "#fffacd",
				lightblue: "#add8e6",
				lightcoral: "#f08080",
				lightcyan: "#e0ffff",
				lightgoldenrodyellow: "#fafad2",
				lightgray: "#d3d3d3",
				chartreuse: "#7fff00",
				lightgreen: "#90ee90",
				blueviolet: "#8a2be2",
				lightgrey: "#d3d3d3",
				lightpink: "#ffb6c1",
				lightsalmon: "#ffa07a",
				lightseagreen: "#20b2aa",
				lightskyblue: "#87cefa",
				lightslategray: "#778899",
				lightslategrey: "#778899",
				lightsteelblue: "#b0c4de",
				lightyellow: "#ffffe0",
				limegreen: "#32cd32",
				linen: "#faf0e6",
				magenta: "#ff00ff",
				mediumaquamarine: "#66cdaa",
				mediumblue: "#0000cd",
				mediumorchid: "#ba55d3",
				mediumpurple: "#9370db",
				crimson: "#dc143c",
				mediumseagreen: "#3cb371",
				burlywood: "#deb887",
				chocolate: "#d2691e",
				coral: "#ff7f50",
				mediumslateblue: "#7b68ee",
				mediumspringgreen: "#00fa9a",
				mediumturquoise: "#48d1cc",
				mediumvioletred: "#c71585",
				midnightblue: "#191970",
				mintcream: "#f5fffa",
				mistyrose: "#ffe4e1",
				moccasin: "#ffe4b5",
				navajowhite: "#ffdead",
				oldlace: "#fdf5e6",
				olivedrab: "#6b8e23",
				orange: "#ffa500",
				orangered: "#ff4500",
				orchid: "#da70d6",
				palegoldenrod: "#eee8aa",
				palegreen: "#98fb98",
				paleturquoise: "#afeeee",
				palevioletred: "#db7093",
				papayawhip: "#ffefd5",
				peachpuff: "#ffdab9",
				peru: "#cd853f",
				pink: "#ffc0cb",
				plum: "#dda0dd",
				powderblue: "#b0e0e6",
				rebeccapurple: "#663399",
				rosybrown: "#bc8f8f",
				royalblue: "#4169e1",
				saddlebrown: "#8b4513",
				salmon: "#fa8072",
				sandybrown: "#f4a460",
				seagreen: "#2e8b57",
				seashell: "#fff5ee",
				sienna: "#a0522d",
				skyblue: "#87ceeb",
				slateblue: "#6a5acd",
				slategrey: "#708090",
				snow: "#fffafa",
				springgreen: "#00ff7f",
				steelblue: "#4682b4",
				tan: "#d2b48c",
				thistle: "#d8bfd8",
				tomato: "#ff6347",
				turquoise: "#40e0d0",
				violet: "#ee82ee",
				wheat: "#f5deb3",
				whitesmoke: "#f5f5f5",
				yellowgreen: "#9acd32",
				cornflowerblue: "#6495ed",
				cornsilk: "#fff8dc",
				blanchedalmond: "#ffebcd",
			};
			colors = Object.values( randomColors );
		} else {
			let i;
			for ( i = 0; i < background_data.length; i++) {
				colors.push( background_data[i].color );
			}
			if ( background_data.length < data.length ) {
				// Set colors are less than the data, so set the last colour for all the remaining ones
				let lastColor = background_data[ i - 1 ].color;
				while( i < data.length ) {
					colors.push( lastColor );
					i++;
				}
			}
		}

		// Set Colors
		for (let i in data) {
			color = jQuery.Color( colors[i] ).rgba();
			// Set opacity
			backgroundOpacity = 0.2;
			borderOpacity = 0.7;
			// Set different background opacity for doughnut and pie
			if( 'doughnut' === elementSettings.type || 'pie' === elementSettings.type ) {
				backgroundOpacity = 1;
				borderOpacity = 1;
			}
			backgroundColors.push( `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${backgroundOpacity})` );
			borderColors.push( `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${borderOpacity})` );
		}

		options =  {
			responsive: true,
			maintainAspectRatio: false,
		};

		// Legend Options
		if( elementSettings.show_legend || elementSettings.show_title ) {
			
			options.plugins = {
				legend: {
					display: elementSettings.show_legend || true,
					labels: {
						filter: (item, chart) => {
							return elementSettings.show_legend;
						},
						color: elementSettings.legend_color || Chart.defaults.color,
					},
					title: {
						display: elementSettings.show_title,
						text: elementSettings.title,
					},
					position: elementSettings.legend_position || 'top',
					align: elementSettings.legend_align || 'center',
				},
			};
		}else{
			options.plugins = {
				legend: {
					display: false,
				},
			};
		}

		if ('yes' == elementSettings.add_text_to_value) {
			options.plugins.tooltip = {
				callbacks: {
					label: function(tooltipItem) {
						let dataset = tooltipItem.dataset;
						let currentValue = dataset.data[tooltipItem.dataIndex];
						return tooltipItem.label + ': ' + currentValue +  elementSettings.text_to_value;
					}
				}
			};
		}

		//Create Y axis Step Size
		const min = Math.min(...data);
		const max = Math.max(...data);
		// check number of divisions
		const divisions = 10;

		const increment = (max - min) / divisions;

		const range = Array.from({length: divisions + 1}, (_, i) => min + i * increment);

		const tickValues = range.map(value => value.toString());
		
		yAxis= {
			scale: {
			  ticks: {
				max: tickValues.length -1,
				stepSize: elementSettings.stepsize,
			  },
			},
		  },
		$.extend(options, yAxis);
	

		scales = {
			scales: {
				y: {
					beginAtZero: Boolean(elementSettings.begin_at_zero),
					grace: elementSettings.grace || 0,
					ticks: {
						color: elementSettings.axis_y_labels_color || Chart.defaults.color,
                    },
					grid: {
						color: elementSettings.axis_y_grid_color || Chart.defaults.color,
					}
				},
				x: {
					ticks: { 
						color: elementSettings.axis_x_labels_color || Chart.defaults.color,
					},
					grid: {
						color: elementSettings.axis_x_grid_color || Chart.defaults.color,
					}
				},
			},
		};
	
		if( 'line' === elementSettings.type || 'bar' === elementSettings.type ) {
			$.extend(options, scales);
		}

		// Display Chart

		new Chart(ctx, {
			type: elementSettings.type,
			data: {
				labels: labels,
				datasets: [{
					label: elementSettings.legend,
					data: data,
					backgroundColor: backgroundColors,
					borderColor: borderColors,
					borderWidth: elementSettings.border_width_data || 0,
				}]
			},
			options: options,
		});
    };


    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/dce-dynamic-charts.default', WidgetElements_DynamicCharts);
    });
})(jQuery);
