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

CustomRect {
	id: root

	readonly property color accent: Colors.palette.m3tertiary

	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

	ServiceRef {
		service: Memory
	}

	ColumnLayout {
		id: layout

		anchors.centerIn: parent
		spacing: Tokens.spacing.extraSmall

		RowLayout {
			Layout.leftMargin: -Tokens.padding.extraSmall
			spacing: Tokens.spacing.small

			MaterialIcon {
				color: root.accent
				fill: 1
				text: "memory_alt"
			}

			CustomText {
				text: qsTr("Memory")
			}
		}

		CircularProgress {
			Layout.alignment: Qt.AlignHCenter
			Layout.topMargin: Tokens.spacing.largeIncreased
			fgColor: root.accent
			implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2
			startAngle: -225
			sweepAngle: 270
			value: Memory.percentage

			Behavior on clampedVal {
				Anim {
				}
			}

			ColumnLayout {
				id: usageColumn

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

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

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

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