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

CustomRect {
	id: root

	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
	readonly property int textWidth: Math.min(metrics.width, 200)

	color: Colors.tPalette.m3surfaceContainer
	implicitHeight: Config.bar.height + Tokens.padding.smallest * 2
	implicitWidth: layout.implicitWidth + Tokens.padding.normal * 2
	radius: Tokens.rounding.full

	Behavior on implicitWidth {
		Anim {
		}
	}

	TextMetrics {
		id: metrics

		font: mediatext.font
		text: mediatext.text
	}

	RowLayout {
		id: layout

		anchors.centerIn: parent

		Behavior on implicitWidth {
			Anim {
			}
		}

		MaterialIcon {
			animate: true
			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
			font.pointSize: Tokens.font.size.larger
			text: Players.active?.isPlaying ? "music_note" : "music_off"
		}

		MarqueeText {
			id: mediatext

			Layout.preferredWidth: root.textWidth
			animate: true
			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
			font.pointSize: Tokens.font.size.normal
			horizontalAlignment: Text.AlignHCenter
			marqueeEnabled: false
			pauseMs: 4000
			text: root.currentMedia
			width: root.textWidth

			CustomMouseArea {
				anchors.fill: parent
				hoverEnabled: true

				onContainsMouseChanged: {
					if (!containsMouse) {
						mediatext.marqueeEnabled = false;
					} else {
						mediatext.marqueeEnabled = true;
						mediatext.anim.start();
					}
				}
			}
		}
	}
}