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

Item {
	id: root

	anchors.fill: parent
	implicitWidth: ZUtils.snap(layout.implicitWidth + layout.anchors.margins * 2, root)

	ServiceRef {
		service: Storage
	}

	ServiceRef {
		service: Memory
	}

	ServiceRef {
		service: Cpu
	}

	ServiceRef {
		service: Gpu
	}

	SnapLayout {
orientation: Qt.Vertical
		id: layout

		anchors.bottom: parent.bottom
		anchors.margins: Tokens.padding.large
		anchors.top: parent.top

		x: ZUtils.snap((root.width - implicitWidth) / 2, root)

		spacing: Tokens.spacing.medium

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

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

		Resource {
			fgColor: Colors.palette.m3tertiary
			icon: "gamepad"
			value: Gpu.percentage
		}

		Resource {
			fgColor: Colors.palette.m3primary
			icon: "host"
			value: Gpu.memoryUsed / Gpu.memoryTotal
		}

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

	component Resource: CircularProgress {
		id: res

		required property string icon

		implicitSize: ZUtils.snap((root.height - layout.anchors.margins * 2 - layout.spacing * 4) / 5, root)

		Behavior on clampedVal {
			Anim {}
		}

		MaterialIcon {
			anchors.centerIn: parent
			color: res.fgColor
			text: res.icon
		}
	}
}