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

ConnectedRect {
	id: root

	default required property Item content
	property alias icon: icon.text
	property bool keepPopupAsChild
	readonly property alias popup: popup
	property alias status: status.text
	property alias text: label.text

	Layout.fillWidth: true
	implicitHeight: navLayout.implicitHeight + navLayout.anchors.margins * 2

	StateLayer {
		id: stateLayer

		manualHoverOverride: popup.hovered && !popup.open

		onClicked: popup.open = true
	}

	RowLayout {
		id: navLayout

		anchors.fill: parent
		anchors.leftMargin: Tokens.padding.largeIncreased
		anchors.margins: Tokens.padding.small
		anchors.rightMargin: Tokens.padding.largeIncreased
		spacing: Tokens.spacing.medium

		MaterialIcon {
			id: icon

			color: Colors.palette.m3onSurfaceVariant
			font.pointSize: Tokens.font.size.larger
		}

		ColumnLayout {
			Layout.fillWidth: true
			spacing: 0

			CustomText {
				id: label

				Layout.fillWidth: true
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.small
			}

			CustomText {
				id: status

				Layout.fillWidth: true
				animate: true
				color: Colors.palette.m3outline
				elide: Text.ElideRight
				font.pointSize: Tokens.font.size.small
				visible: text
			}
		}

		Item {
			id: triggerArea

			implicitHeight: popup.implicitHeight
			implicitWidth: popup.implicitWidth

			TransformWatcher {
				id: tWatcher

				a: area.parent
				b: triggerArea
			}

			MouseArea {
				id: area

				anchors.fill: parent
				cursorShape: popup.open ? Qt.ArrowCursor : undefined
				enabled: popup.open
				hoverEnabled: popup.open
				parent: {
					if (root.keepPopupAsChild)
						return triggerArea;

					const win = QsWindow.window;
					const contentWin = win as Windows; // If inside the drawer content window, put it inside the interaction wrapper so hover works
					return contentWin ? contentWin.interactionWrapper : (win as QsWindow).contentItem;
				}
				z: popup.animDriver > 0 ? 1 : 0

				onClicked: popup.open = false

				BlobPopup {
					id: popup

					color: open || hovered || stateLayer.containsMouse ? Colors.palette.m3secondaryContainer : Colors.palette.m3surfaceContainerHighest
					content: root.content
					hoverOverride: stateLayer.containsMouse
					padding: Tokens.padding.extraSmall
					pressOverride: stateLayer.pressed
					x: {
						tWatcher.transform;
						return triggerArea.mapToItem(area.parent, 0, 0).x;
					}
					y: {
						tWatcher.transform;
						return triggerArea.mapToItem(area.parent, 0, 0).y;
					}
				}
			}
		}
	}
}