import QtGraphicalEffects 1.15
import QtQuick 2.15
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

Window {
  id: root
  width: 640
  height: 480
  visible: true

  QtObject {
    id: intern

    property bool isDetached: false
    property Window detachedWindow: null
  }

  ColumnLayout {
    id: content
    anchors.fill: parent

    Button {
      text: intern.isDetached ? "attach" : "detach"

      onClicked: {
        let detached = !intern.isDetached
        intern.isDetached = detached

        if (detached) {
          windowLoader.active = detached
          intern.detachedWindow = windowLoader.item

          intern.detachedWindow.x = root.x + root.width + 20
          intern.detachedWindow.y = root.y
          intern.detachedWindow.width = 300
          intern.detachedWindow.height = 200
          intern.detachedWindow.show()

          contentWrapper.parent = intern.detachedWindow.itemContainer
          contentWrapper.anchors.fill = contentWrapper.parent
        }
        else {
          contentWrapper.anchors.fill = undefined
          contentWrapper.parent = content
          intern.detachedWindow = null
          windowLoader.active = detached
        }
      }
    }

    Button {
      text: rect2Loader.active ? "unload" : "load"

      onClicked: {
        rect2Loader.active = !rect2Loader.active
      }
    }

    Item {
      id: spacer
      Layout.fillHeight: true
      Layout.fillWidth: true
    }

    Timer {
      id: activateTimer
      interval: 100
      onTriggered: {
        colorOverlayLoader.active = true
      }
    }

    Item {
      id: contentWrapper
      Layout.fillHeight: true
      Layout.fillWidth: true

      onWindowChanged: {
        colorOverlayLoader.active = !!window

//        if (!window) {
//          colorOverlayLoader.active = false
//        } else if (!colorOverlayLoader.active) {
//          activateTimer.start()
//        }
      }

      Loader {
        id: colorOverlayLoader
        active: true
        width: parent.width / 2
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        sourceComponent: Rectangle {
          id: rect
          color: "red"

          ColorOverlay {
            id: colorOverlay
            anchors.fill: parent
            cached: false
            source: rect
            color: "#5500ff00"
          }
        }
      }

      Loader {
        id: rect2Loader
        active: false

        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: parent.width / 2

        sourceComponent: Rectangle {
          id: rect2
          color: "blue"

          ColorOverlay {
            anchors.fill: parent
            cached: false
            source: rect2
            color: "#00ffaa"
          }
        }
      }
    }
  }

  Loader {
    id: windowLoader
    active: false
    sourceComponent: Window {
      readonly property alias itemContainer: container

      minimumWidth: 200
      minimumHeight: 60

      Item {
        id: container
        anchors.fill: parent
      }
    }
  }
}