import QtQuick
import QtQuick.Layouts
import QtQuick.Shapes
import qs.Components
import qs.Config

Item {
	id: root

	property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
	property real animatedPercentage: 0
	readonly property real arcStartAngle: 0.75 * Math.PI
	readonly property real arcSweep: 1.5 * Math.PI
	property string icon
	required property color mainColor
	required property double percentage
	property bool shown: true
	property color usageColor: warning ? DynamicColors.palette.m3error : mainColor
	property bool warning: percentage * 100 >= warningThreshold
	property int warningThreshold: 80

	clip: true
	height: implicitHeight
	implicitHeight: 34
	implicitWidth: 34
	percentage: 0
	visible: width > 0 && height > 0
	width: implicitWidth

	Behavior on animatedPercentage {
		Anim {
			duration: Appearance.anim.durations.large
		}
	}

	Component.onCompleted: animatedPercentage = percentage
	onPercentageChanged: animatedPercentage = percentage

	// Canvas {
	// 	id: gaugeCanvas
	//
	// 	anchors.centerIn: parent
	// 	height: width
	// 	width: Math.min(parent.width, parent.height)
	//
	// 	Component.onCompleted: requestPaint()
	// 	onPaint: {
	// 		const ctx = getContext("2d");
	// 		ctx.reset();
	// 		const cx = width / 2;
	// 		const cy = (height / 2) + 1;
	// 		const radius = (Math.min(width, height) - 12) / 2;
	// 		const lineWidth = 3;
	// 		ctx.beginPath();
	// 		ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep);
	// 		ctx.lineWidth = lineWidth;
	// 		ctx.lineCap = "round";
	// 		ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
	// 		ctx.stroke();
	// 		if (root.animatedPercentage > 0) {
	// 			ctx.beginPath();
	// 			ctx.arc(cx, cy, radius, root.arcStartAngle, root.arcStartAngle + root.arcSweep * root.animatedPercentage);
	// 			ctx.lineWidth = lineWidth;
	// 			ctx.lineCap = "round";
	// 			ctx.strokeStyle = root.accentColor;
	// 			ctx.stroke();
	// 		}
	// 	}
	//
	// 	Connections {
	// 		function onAnimatedPercentageChanged() {
	// 			gaugeCanvas.requestPaint();
	// 		}
	//
	// 		target: root
	// 	}
	//
	// 	Connections {
	// 		function onPaletteChanged() {
	// 			gaugeCanvas.requestPaint();
	// 		}
	//
	// 		target: DynamicColors
	// 	}
	// }

	MaterialIcon {
		id: icon

		anchors.centerIn: parent
		color: DynamicColors.palette.m3onSurface
		font.pointSize: 12
		text: root.icon
	}

	CustomRect {
		anchors.left: icon.right
		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
		implicitHeight: parent.height
		implicitWidth: 5
		radius: Appearance.rounding.full

		CustomRect {
			anchors.bottom: parent.bottom
			anchors.left: parent.left
			anchors.right: parent.right
			color: root.mainColor
		}
	}
}