import QtQuick
import QtQuick.Layouts
import M3Shapes
import ZShell.Config
import qs.Modules.Dashboard.Media
import qs.Components
import qs.Services
import qs.Helpers

Item {
	id: root

	property ScreenState screenState

	implicitWidth: 1000
	implicitHeight: 320

	BackgroundShapes {
		anchors.fill: parent
	}

	RowLayout {
		anchors.fill: parent
		anchors.margins: Tokens.padding.large
		spacing: Tokens.spacing.extraLarge

		CoverVisualizer {
			Layout.fillHeight: true
			implicitWidth: 250
		}

		Item {
			Layout.fillWidth: true
			Layout.fillHeight: true

			state: Players.active ? "" : "noMedia"

			states: State {
				name: "noMedia"

				PropertyChanges {
					noMedia.opacity: 1
					content.opacity: 0
				}
			}

			transitions: [
				Transition {
					from: ""

					SequentialAnimation {
						Anim {
							target: content
							property: "opacity"
							type: Anim.DefaultEffects
						}
						Anim {
							target: noMedia
							property: "opacity"
							type: Anim.SlowEffects
						}
					}
				},
				Transition {
					to: ""

					SequentialAnimation {
						Anim {
							target: noMedia
							property: "opacity"
							type: Anim.DefaultEffects
						}
						Anim {
							target: content
							property: "opacity"
							type: Anim.SlowEffects
						}
					}
				}
			]

			Loader {
				id: noMedia

				anchors.centerIn: parent
				anchors.horizontalCenterOffset: -Tokens.padding.extraLarge * 2
				asynchronous: true
				active: opacity > 0
				opacity: 0

				sourceComponent: ColumnLayout {
					spacing: Tokens.spacing.small

					MaterialShape {
						Layout.topMargin: (pathBounds().height - implicitSize) / 2
						Layout.bottomMargin: (pathBounds().height - implicitSize) / 2 + Tokens.spacing.small
						Layout.alignment: Qt.AlignHCenter
						color: Colors.palette.m3primaryContainer
						implicitSize: icon.implicitHeight + Tokens.padding.extraLarge * 2
						shape: MaterialShape.ClamShell

						Behavior on color {
							CAnim {}
						}

						MaterialIcon {
							id: icon

							anchors.centerIn: parent
							text: "queue_music"
							fontStyle: Tokens.font.icon.large
							color: Colors.palette.m3onPrimaryContainer
						}
					}

					CustomText {
						Layout.alignment: Qt.AlignHCenter
						text: qsTr("Nothing playing")
						font: Tokens.font.body.medium
					}

					CustomText {
						text: qsTr("Play something for it to show up here!")
						color: Colors.palette.m3onSurfaceVariant
						font: Tokens.font.body.large
					}
				}
			}

			Loader {
				id: content

				anchors.fill: parent
				asynchronous: true
				active: opacity > 0

				sourceComponent: RowLayout {
					spacing: Tokens.spacing.extraLarge

					Details {
						Layout.fillWidth: true
					}

					LyricsAndSelector {
						Layout.fillHeight: true
						implicitWidth: 300
					}
				}
			}
		}
	}
}