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)
    }

    ColumnLayout {
        Button {
            text: "O"
            onClicked: testMenu.open()

            Menu {
                id: testMenu

                y: parent.height

                MenuItem {
                    text: "A"
                }
                MenuItem {
                    text: "B"
                }
            }
        }
        TextField {
            id: textField

            Popup {
                y: parent.height
                visible: textField.activeFocus
                contentItem: Button {
                    text: "Clear"
                    focusPolicy: Qt.NoFocus
                    onClicked: textField.clear()
                }
            }
        }
        ComboBox {
            model: ["First", "Second", "Third"]
        }
    }
    FocusVisualizationItem {
        focusItem: root.activeFocusItem
        color: "yellow"
    }
    FocusVisualizationItem {
        focusItem: root.activeFocusControl
        color: "orange"
    }
}