import QtQuick
import QtQuick.Controls

Window {
	id: root

	visible: true

	width: 640
	height: 480

	title: qsTr("Hello World")

	component MyPopup : Popup {
		id: myPopupDecl

		property string name: "popup"
		property color backgroundColor: "black"

		objectName: myPopupDecl.name

		padding: 0
		background: Rectangle {
			color: myPopupDecl.backgroundColor

			// explicitly disable clicks through popup body
			MouseArea {
				anchors.fill: parent
			}
		}

		contentItem: Text {
			text: myPopupDecl.name
		}
	}

	Button {
		anchors.centerIn: parent

		text: "Open popup1"

		onClicked: popup1.open()
	}

	MyPopup {
		id: popup1

		width: 200
		height: parent.height

		name: "popup1"
		backgroundColor: "red"

		Button {
			anchors.right: parent.right
			text: "open popup2"
			onClicked: popup2.open()
		}
	}

	MyPopup {
		id: popup2

		width: 300
		height: 300

		anchors.centerIn: Overlay.overlay

		name: "popup2"
		backgroundColor: "green"

		Button {
			anchors.centerIn: parent

			text: "open popup3"

			onClicked: popup3.open()

			MyPopup {
				id: popup3

				width: 100
				height: 100

				name: "popup3"
				backgroundColor: "blue"

				// There is a problem with active dim and MouseArea in Overlay.modeless.
				// dim with true activates Overlay.modeless which has MouseArea inside
				// and this MouseArea causes misclicks (clicks outside body that closes popup) for popup1
				// when we click on specific part of popup2 body that doesn't intersect with body of popup1.
				dim: true
				Overlay.modeless: MouseArea {}
			}
		}
	}
}