import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button {
        text: "Open"
        onClicked: popup.open()
        anchors.horizontalCenter: parent.horizontalCenter
        y: 10
    }

    component CPopup: Popup {
        id: cPopup

        width: 400
        height: 300

        closePolicy: Popup.NoAutoClose

        Component.onCompleted: {
            x = parent.width / 2 - width / 2
            y = parent.height / 2 - height / 2
        }

        background: Rectangle {
            id: backgroundRect
            color: "#505050"

            Rectangle {
                width: parent.width
                height: 30
                color: "#2e2e2e"

                MouseArea {
                    enabled: true
                    propagateComposedEvents: true
                    anchors.fill: parent
                    property point pressedPosition: Qt.point(0, 0)
                    onPressed: function(mouse){
                        console.log("Presssed...")
                        pressedPosition  = Qt.point(mouse.x,mouse.y)
                    }
                    cursorShape: Qt.OpenHandCursor
                    onPositionChanged: function(mouse){
                        console.log("Moving...")
                        var delta = Qt.point(mouse.x - pressedPosition.x, mouse.y - pressedPosition.y)
                        cPopup.x += delta.x;
                        cPopup.y += delta.y;
                    }
                }
            }
        }

        Button {
            text: "Close"
            onClicked: cPopup.close()
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }

    CPopup {
        id: popup
        modal: true // commenting out this line will enable us to drag around
    }
}