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")
	required property bool horizontal
	readonly property int textWidth: Math.min(metrics.width, 200)

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

	Behavior on implicitWidth {
		Anim {
		}
	}

	TextMetrics {
		id: metrics

		font: mediatext.font
		text: mediatext.text
	}

	GridLayout {
		id: layout

		anchors.centerIn: parent
		columns: root.horizontal ? -1 : 1

		Behavior on implicitWidth {
			Anim {
			}
		}

		MaterialIcon {
			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
			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.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
			Layout.preferredHeight: root.horizontal ? root.height : 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

			transform: [
				Translate {
					x: !root.horizontal ? -root.textWidth + mediatext.implicitHeight : 0
				},
				Rotation {
					angle: root.horizontal ? 0 : 270
					origin.x: mediatext.implicitHeight / 2
					origin.y: mediatext.implicitHeight / 2
				}
			]

			CustomMouseArea {
				anchors.fill: parent
				hoverEnabled: true

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