import QtQuick
import QtQuick.Layouts
import ZShell
import ZShell.Components
import ZShell.Services
import ZShell.Config
import qs.Components
import qs.Services

CustomRect {
	id: root

	readonly property color accent: Colors.palette.m3tertiary

	required property real perc
	required property int used
	required property int total
	required property string label
	required property string icon

	Layout.fillWidth: true
	color: Colors.tPalette.m3surfaceContainer
	implicitHeight: layout.implicitHeight + Tokens.padding.large * 2
	implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased * 2
	radius: Tokens.rounding.largeIncreased

	SnapLayout {
		id: layout

		anchors.left: parent.left
		anchors.right: parent.right
		anchors.verticalCenter: parent.verticalCenter
		orientation: Qt.Vertical
		spacing: Tokens.spacing.extraSmall

		SnapLayout {
			Layout.alignment: Qt.AlignHCenter
			spacing: Tokens.spacing.small

			MaterialIcon {
				color: root.accent
				fill: 1
				text: root.icon
			}

			CustomText {
				text: root.label
			}
		}

		CircularProgress {
			Layout.alignment: Qt.AlignHCenter
			Layout.topMargin: Tokens.spacing.largeIncreased
			fgColor: root.accent
			implicitSize: ZUtils.snap(usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2, root)
			startAngle: -225
			sweepAngle: 270
			value: root.perc

			Behavior on clampedVal {
				Anim {}
			}

			SnapLayout {
orientation: Qt.Vertical
				id: usageColumn

				anchors.centerIn: parent
				anchors.verticalCenterOffset: Tokens.padding.extraSmall
				spacing: 0

				CustomText {
					Layout.alignment: Qt.AlignHCenter
					color: root.accent
					font: Tokens.font.body.large
					text: Math.round(root.perc * 100) + "%"
				}

				CustomText {
					Layout.alignment: Qt.AlignHCenter
					color: Colors.palette.m3onSurfaceVariant
					text: qsTr("Used")
				}
			}
		}

		CustomText {
			Layout.alignment: Qt.AlignHCenter
			text: {
				const fmt = UsageFmt.formatKib(root.used, root.total);
				return `${fmt.value.toFixed(1)} / ${Math.floor(fmt.total)} ${fmt.unit}`;
			}
		}
	}
}