function MfCharts(options){

	this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;
    this.titleOptions = options.titleOptions;
    this.totalValue = [...Object.values(this.options.data)].reduce((a, b) => a + b, 0);
    this.radius = Math.min(this.canvas.width / 2, this.canvas.height / 2) - options.padding;

	// Draw a line 
	this.drawLine = function(ctx, startX, startY, endX, endY, color) {
		ctx.save();
		ctx.strokeStyle = color;
		ctx.beginPath();
		ctx.moveTo(startX, startY);
		ctx.lineTo(endX, endY);
		ctx.stroke();
		ctx.restore();
	}

	// Draw Arc of a Circle
	this.drawArc = function(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
		ctx.save();
		ctx.strokeStyle = color;
		ctx.beginPath();
		ctx.arc(centerX, centerY, radius, startAngle, endAngle);
		ctx.stroke();
		ctx.restore();
	}

	this.drawPieSlice = function( ctx, centerX, centerY, radius, startAngle, endAngle, fillColor, strokeColor ) {
		ctx.save();
		ctx.fillStyle = fillColor;
		ctx.strokeStyle = strokeColor;
		ctx.beginPath();
		ctx.moveTo(centerX, centerY);
		ctx.arc(centerX, centerY, radius, startAngle, endAngle);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
		ctx.restore();
	}

	this.drawSlices = function(){
		var colorIndex = 0;
		var startAngle = -Math.PI / 2;

		for (var categ in this.options.data) {
			var val = this.options.data[categ];
			var sliceAngle = (2 * Math.PI * val) / this.totalValue;

			this.drawPieSlice(
				this.ctx,
				this.canvas.width / 2,
				this.canvas.height / 2,
				this.radius,
				startAngle,
				startAngle + sliceAngle,
				this.colors[colorIndex % this.colors.length]
			);

			startAngle += sliceAngle;
			colorIndex++;
		}

		if (this.options.doughnutHoleSize) {
			this.drawPieSlice(
				this.ctx,
				this.canvas.width / 2,
				this.canvas.height / 2,
				this.options.doughnutHoleSize * this.radius,
				0,
				2 * Math.PI,
				"#FFF",
				"#FFF"
			);

			this.drawArc(
				this.ctx,
				this.canvas.width / 2,
				this.canvas.height / 2,
				this.options.doughnutHoleSize * this.radius,
				0,
				2 * Math.PI,
				"#ffffff"
			);
		}
	}

	this.drawLabels =  function(){
		var colorIndex = 0;
		var startAngle = -Math.PI / 2;
		for (var categ in this.options.data) {
			var val = this.options.data[categ];
			var sliceAngle = (2 * Math.PI * val) / this.totalValue;
			var labelX =
			this.canvas.width / 2 +
			(this.radius / 2) * Math.cos(startAngle + sliceAngle / 2);
			var labelY =
			this.canvas.height / 2 +
			(this.radius / 2) * Math.sin(startAngle + sliceAngle / 2);

			if (this.options.doughnutHoleSize) {
			var offset = (this.radius * this.options.doughnutHoleSize) / 2;
			labelX =
				this.canvas.width / 2 +
				(offset + this.radius / 2) * Math.cos(startAngle + sliceAngle / 2);
			labelY =
				this.canvas.height / 2 +
				(offset + this.radius / 2) * Math.sin(startAngle + sliceAngle / 2);
			}

			var labelText = Number((100 * val) / this.totalValue).toFixed(2);
			this.ctx.textAlign = "center";
            this.ctx.textBaseline = "middle";
			this.ctx.fillStyle = "";
			this.ctx.font = "20px Khand";
			this.ctx.fillText(labelText + "%", labelX, labelY);
			startAngle += sliceAngle;
		}
	}

	this.drawTitle = function(){
		this.ctx.save();
		this.ctx.textBaseline = "bottom";
		this.ctx.textAlign = this.titleOptions.align;
		this.ctx.fillStyle = this.titleOptions.fill;
		this.ctx.font = `${this.titleOptions.font.weight} ${this.titleOptions.font.size} ${this.titleOptions.font.family}`;
		let xPos = this.canvas.width / 2;
		if (this.titleOptions.align == "left") {
			xPos = 10;
		}
		if (this.titleOptions.align == "right") {
			xPos = this.canvas.width - 10;
		}
		this.ctx.fillText(this.options.seriesName, xPos, this.canvas.height);
		this.ctx.restore();
	}

	this.drawLegend = function(){
		let pIndex = 0;
		let legend = document.querySelector("div[for='quiz_overview_canvas']");
		let ul = document.createElement("ul");
		legend.append(ul);

		for (let ctg of Object.keys(this.options.data)) {
			let li = document.createElement("li");
			li.style.listStyle = "none";
			li.style.display = "flex";
			li.style.alignItems = "center";
			li.style.gap = "8px";
			li.style.marginBottom = "6px";
			li.style.fontSize = "13px";
			li.style.color = "#444";

			// Colored square swatch
			let swatch = document.createElement("span");
			swatch.style.display = "inline-block";
			swatch.style.width = "14px";
			swatch.style.height = "14px";
			swatch.style.borderRadius = "3px";
			swatch.style.backgroundColor = this.colors[pIndex % this.colors.length];
			swatch.style.flexShrink = "0";

			li.appendChild(swatch);
			li.appendChild(document.createTextNode(ctg));
			ul.append(li);
			pIndex++;
		}
	}

	this.draw = function(){
		this.drawSlices();
		this.drawLabels();
		this.drawTitle();
		this.drawLegend();
	}
}
