import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
import Quickshell.Wayland

import "../../colors"

Variants {
	id: root
	property color buttonColor: Colors.secondaryContainer
	property color buttonHoverColor: Colors.primary
	property color borderColor: Colors.secondaryContainer_fg
	property color borderHoverColor: Colors.primaryContainer_fg
	default property list<LogoutButton> buttons

	model: Quickshell.screens
	PanelWindow {
		id: w

		property var modelData
		screen: modelData

		exclusionMode: ExclusionMode.Ignore
		WlrLayershell.layer: WlrLayer.Overlay
		WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive

		color: "transparent"

		contentItem {
			focus: true
			Keys.onPressed: event => {
				if (event.key == Qt.Key_Escape) {
					console.log("Pressed Escape, closing Wallpaper Picker")
					wlogoutLoader.active = false
				} else {
					for (let i = 0; i < buttons.length; i++) {
						let button = buttons[i];
						if (event.key == button.keybind) button.exec();
					}
				}
			}
		}

		anchors {
			top: true
			left: true
			bottom: true
			right: true
		}

		Rectangle {
			anchors.fill: parent
			Image {
				anchors.fill: parent
				source: "/home/honney/Pictures/Wallpapers/Static/blurred.jpg"
				fillMode: Image.PreserveAspectCrop
			}

			MouseArea {
				anchors.fill: parent
				onClicked: {
					console.log("Pressed Escape, closing Wallpaper Picker")
					wlogoutLoader.active = false
				}
				GridLayout {
					anchors.centerIn: parent

					width: parent.width * 0.75
					height: parent.height * 0.75

					columns: 3
					columnSpacing: 20
					rowSpacing: 20

					Repeater {
						model: buttons
						delegate: Rectangle {
							required property LogoutButton modelData;

							Layout.fillWidth: true
							Layout.fillHeight: true

							color: ma.containsMouse ? buttonHoverColor : buttonColor
        					radius: 10
							border.color: ma.containsMouse ? borderColor : borderHoverColor
							border.width: 2

							MouseArea {
								id: ma
								anchors.fill: parent
								hoverEnabled: true
								onClicked: modelData.exec()
							}

							Image {
								id: icon
								anchors.centerIn: parent
								source: `icons/${modelData.icon}.svg`
								width: parent.width * 0.3
								height: parent.width * 0.3

								sourceSize.width: width
								sourceSize.height: height
							}

							// Text {
							// 	id: icon
							// 	anchors.centerIn: parent

							// 	text: modelData.icon_text ?? "?"
							// 	font.pointSize: parent.height * 0.4
							// 	color: "white"
							// }

							Text {
								anchors {
									top: icon.bottom
									topMargin: 20
									horizontalCenter: parent.horizontalCenter
								}

								text: modelData.text
								font.pointSize: 20
								color: "white"
							}
						}
					}
				}
			}
		}
	}
}