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

Row {
	id: root

	property real batHeight: Tokens.padding.small * 2
	property real batWidth: Tokens.padding.medium * 2
	required property string devState
	property real nubHeight: Tokens.padding.extraSmall
	property real nubWidth: 2
	required property real percentage
	property real radius: Tokens.rounding.small / 2

	spacing: 1

	CustomRect {
		id: track

		anchors.verticalCenter: parent.verticalCenter
		color: Battery.getColors(root.percentage, root.devState).bg
		height: root.batHeight
		radius: root.radius
		width: root.batWidth

		CustomText {
			color: Battery.getColors(root.percentage, root.devState).fg
			font.pointSize: Tokens.font.size.larger / 1.5
			font.weight: 800
			height: track.height
			horizontalAlignment: Text.AlignHCenter
			text: Math.round(root.percentage * 100)
			verticalAlignment: Text.AlignVCenter
			width: track.width
		}

		Item {
			clip: true
			width: parent.width * root.percentage

			anchors {
				bottom: parent.bottom
				left: parent.left
				top: parent.top
			}

			CustomRect {
				id: fill

				color: Battery.getColors(root.percentage, root.devState).fg
				height: track.height
				radius: track.radius
				width: track.width

				CustomText {
					id: batteryLabel

					clip: true
					color: Battery.getColors(root.percentage, root.devState).bg
					font.pointSize: Tokens.font.size.larger / 1.5
					font.weight: 800
					height: track.height
					horizontalAlignment: Text.AlignHCenter
					text: Math.round(root.percentage * 100)
					verticalAlignment: Text.AlignVCenter
					width: track.width
				}
			}
		}
	}

	CustomRect {
		id: nub

		anchors.verticalCenter: parent.verticalCenter
		bottomRightRadius: 20
		color: root.percentage < 0.99 ? track.color : fill.color
		height: root.nubHeight
		topRightRadius: 20
		width: root.nubWidth
	}
}