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

Item {
	id: root

	required property var lock

	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2

	ClipRect {
		anchors.fill: parent

		color: Colors.tPalette.m3surfaceContainer
		radius: Tokens.rounding.small
		bottomLeftRadius: Tokens.rounding.largeIncreased

		FadeImage {
			id: image

			anchors.fill: parent
			asynchronous: true
			fillMode: Image.PreserveAspectCrop
			opacity: status === Image.Ready ? 1 : 0
			source: Players.getArtUrl(Players.active)
			sourceSize: {
				const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
				return Qt.size(width * dpr, height * dpr);
			}

			Behavior on opacity {
				Anim {
					type: Anim.StandardExtraLarge
				}
			}

			CustomRect {
				anchors.fill: parent
				color: Colors.palette.m3surface
				opacity: 0.7
			}
		}
	}

	ColumnLayout {
		id: layout

		anchors.left: parent.left
		anchors.margins: Tokens.padding.extraLarge
		anchors.right: parent.right
		anchors.verticalCenter: parent.verticalCenter
		spacing: Tokens.spacing.extraSmall

		CustomText {
			Layout.fillWidth: true
			animate: true
			color: Colors.palette.m3primary
			elide: Text.ElideRight
			font: Tokens.font.title.large
			horizontalAlignment: Text.AlignHCenter
			text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track")
		}

		CustomText {
			Layout.fillWidth: true
			animate: true
			color: Colors.palette.m3onSurfaceVariant
			elide: Text.ElideRight
			horizontalAlignment: Text.AlignHCenter
			text: (Players.active?.trackArtist ?? qsTr("Try playing some music!")) || qsTr("Unknown artist")
		}

		ButtonRow {
			Layout.alignment: Qt.AlignHCenter
			Layout.topMargin: Tokens.spacing.small
			spacing: Tokens.spacing.extraSmall

			IconButton {
				enabled: Players.active?.canGoPrevious ?? false
				icon: "skip_previous"
				isRound: true
				shapeMorph: true
				type: IconButton.Tonal

				onClicked: Players.active?.previous()
			}

			IconButton {
				checked: Players.active?.isPlaying ?? false
				enabled: Players.active?.canTogglePlaying ?? false
				icon: Players.active?.isPlaying ? "pause" : "play_arrow"
				implicitWidth: implicitHeight + Tokens.padding.largeIncreased * 2
				isRound: true
				shapeMorph: true

				onClicked: Players.active?.togglePlaying()
			}

			IconButton {
				enabled: Players.active?.canGoNext ?? false
				icon: "skip_next"
				isRound: true
				shapeMorph: true
				type: IconButton.Tonal

				onClicked: Players.active?.next()
			}
		}
	}
}