pragma ComponentBehavior: Bound

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

CustomRect {
	id: root

	readonly property real fontScale: {
		const diff = width / 391 - 1; // 391 is the width at 1080 height screen
		return 1 + Math.pow(Math.abs(diff), 0.8) * Math.sign(diff);
	}

	color: Colors.tPalette.m3surfaceContainer
	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
	radius: Tokens.rounding.small

	ServiceRef {
		service: Cpu
	}

	ServiceRef {
		service: Memory
	}

	ServiceRef {
		service: Storage
	}

	RowLayout {
		id: layout

		anchors.fill: parent
		anchors.margins: Tokens.padding.large
		spacing: Tokens.spacing.largeIncreased

		Resource {
			id: cpu

			fgColor: Colors.palette.m3primary
			icon: "memory"
			value: Cpu.percentage
		}

		Resource {
			fgColor: Colors.palette.m3tertiary
			icon: "memory_alt"
			value: Memory.percentage
		}

		Resource {
			fgColor: Colors.palette.m3secondary
			icon: "hard_disk"
			value: Storage.percentage
		}
	}

	component Resource: CircularProgress {
		id: res

		required property string icon

		Layout.fillWidth: true
		implicitSize: width

		Behavior on clampedVal {
			Anim {
			}
		}

		MaterialIcon {
			anchors.centerIn: parent
			color: res.fgColor
			font.pointSize: Tokens.font.size.extraLarge
			text: res.icon
		}
	}
}