import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: root

    component FocusVisualizationItem: Rectangle {
        required property Item focusItem

        x: {
            const refreshTrigger = refreshTimer.refreshTrigger;
            return focusItem?.mapToItem(Overlay.overlay, 0, 0).x ?? 0;
        }
        y: {
            const refreshTrigger = refreshTimer.refreshTrigger;
            return focusItem?.mapToItem(Overlay.overlay, 0, 0).y ?? 0;
        }
        width: focusItem?.width ?? 0
        height: focusItem?.height ?? 0
        visible: focusItem !== null
        parent: Overlay.overlay
        color: "pink"
        opacity: 0.1
        z: 100000000

        Timer {
            id: refreshTimer

            property bool refreshTrigger: false

            running: true
            interval: 10
            repeat: true
            onTriggered: () => {
                refreshTrigger = !refreshTrigger;
            }
        }
    }

    width: 640
    height: 480
    visible: true
    onActiveFocusItemChanged: () => {
        console.debug("onActiveFocusItemChanged:", activeFocusItem)
    }
    onActiveFocusControlChanged: () => {
        console.debug("onActiveFocusControlChanged:", activeFocusControl)
    }

    RowLayout {
        TextField {}
        Button {
            objectName: text
            text: "Open Popup"
            onClicked: popup.open()

            Popup {
                id: popup

                y: parent.height
                modal: true
                closePolicy: Popup.NoAutoClose
                contentItem: ColumnLayout {
                    Button {
                        objectName: text
                        text: "Open Nested Popup"
                        onClicked: nestedPopup.open()

                        Popup {
                            id: nestedPopup

                            y: parent.height
                            modal: true
                            closePolicy: Popup.NoAutoClose
                            contentItem: ColumnLayout {
                                Button {
                                    objectName: text
                                    text: "Close Nested Popup"
                                    onClicked: nestedPopup.close()
                                }
                            }
                        }
                    }
                    Button {
                        objectName: text
                        text: "Close Popup"
                        onClicked: popup.close()
                    }
                }
            }
        }
    }
    FocusVisualizationItem {
        focusItem: root.activeFocusItem
        color: "yellow"
    }
    FocusVisualizationItem {
        focusItem: root.activeFocusControl
        color: "orange"
    }
}