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

CustomClippingRect {
	id: root

	required property var lock

	color: DynamicColors.tPalette.m3surfaceContainer
	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
	radius: Appearance.rounding.small

	FadeImage {
		id: image

		anchors.fill: parent
		asynchronous: true
		fillMode: Image.PreserveAspectCrop
		layer.enabled: true
		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: DynamicColors.palette.m3surface
			opacity: 0.7
		}
	}

	ColumnLayout {
		id: layout

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

		CustomText {
			Layout.fillWidth: true
			animate: true
			color: DynamicColors.palette.m3primary
			elide: Text.ElideRight
			font.pointSize: Appearance.font.size.medium
			horizontalAlignment: Text.AlignHCenter
			text: (Players.active?.trackTitle ?? qsTr("Nothing playing")) || qsTr("Unknown track")
		}

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

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

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

				onClicked: Players.active?.previous()
			}

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

				onClicked: Players.active?.togglePlaying()
			}

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

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