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

CustomClippingRect {
	id: root

	required property color accent
	required property string icon
	required property string label
	required property string subLabel
	required property real temperature
	required property real usage

	color: Colors.tPalette.m3surfaceContainer
	implicitHeight: Math.max(tempProg.implicitHeight + detailsRow.implicitHeight + Tokens.spacing.largeIncreased, usageColumn.implicitHeight + usageLabel.implicitHeight) + Tokens.padding.large * 2
	implicitWidth: 450
	radius: Tokens.rounding.largeIncreased

	CustomRect {
		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.top: parent.top
		color: Qt.alpha(root.accent, 0.05)
		implicitWidth: parent.width * root.usage

		Behavior on implicitWidth {
			Anim {
			}
		}
	}

	CircularProgress {
		id: tempProg

		anchors.left: parent.left
		anchors.margins: Tokens.padding.large
		anchors.top: parent.top
		fgColor: root.accent
		implicitSize: Math.max(icon.implicitWidth, icon.implicitHeight) + Tokens.padding.small * 2
		spacing: Tokens.spacing.extraSmall
		strokeWidth: Tokens.padding.extraSmall
		value: root.usage

		Behavior on clampedVal {
			Anim {
			}
		}

		MaterialIcon {
			id: icon

			anchors.centerIn: parent
			color: root.accent
			font.pointSize: Tokens.font.size.large
			text: root.icon
		}
	}

	ColumnLayout {
		anchors.left: tempProg.right
		anchors.margins: Tokens.spacing.largeIncreased
		anchors.right: usageColumn.left
		anchors.verticalCenter: tempProg.verticalCenter
		spacing: Tokens.spacing.extraSmall

		CustomText {
			color: root.accent
			text: root.label
		}

		CustomText {
			Layout.fillWidth: true
			color: Colors.palette.m3onSurfaceVariant
			elide: Text.ElideRight
			text: root.subLabel
		}
	}

	ColumnLayout {
		id: detailsRow

		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.margins: Tokens.padding.largeIncreased
		spacing: Tokens.spacing.extraSmall

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

			MaterialIcon {
				Layout.topMargin: Math.round(fontInfo.pointSize * 0.08)
				color: root.temperature > 90 ? Colors.palette.m3error : root.accent
				fill: 1
				text: root.temperature > 90 ? "thermometer_alert" : "thermometer"
			}

			CustomText {
				text: `${Math.ceil(root.temperature)}°${"C"}`
			}
		}

		CustomProgressBar {
			fgColor: root.accent
			implicitHeight: Tokens.padding.extraSmall
			indeterminate: isNaN(root.usage) || isNaN(root.temperature)
			value: root.temperature / 100
		}
	}

	Column {
		id: usageColumn

		anchors.margins: Tokens.padding.large
		anchors.right: parent.right
		anchors.rightMargin: 32
		anchors.verticalCenter: parent.verticalCenter
		spacing: 0

		CustomText {
			id: usageLabel

			anchors.right: parent.right
			color: Colors.palette.m3onSurfaceVariant
			font.pointSize: Tokens.font.size.normal
			text: qsTr("Usage")
		}

		CustomText {
			anchors.right: parent.right
			color: root.accent
			font.pointSize: Tokens.font.size.extraLarge
			font.weight: Font.Medium
			text: isNaN(root.usage) ? "...%" : Math.round(root.usage * 100) + "%"
		}
	}
}