import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    id: root

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

    readonly property bool useA: true
    property bool isActive: true

    signal somthingTriggered()

    ColumnLayout {
        id: mainLayout

        Button {
            text: "triggerSomething"
            onClicked: () => root.somthingTriggered()
        }
        Button {
            text: "active"
            onClicked: () => root.isActive = ! root.isActive
        }
        Loader {
            id: myLoader

            active: root.isActive
            visible: active
            sourceComponent: bComponent
            states: [
                State {
                    when: root.useA

                    PropertyChanges {
                        target: myLoader
                        sourceComponent: aComponent
                    }
                }
            ]

            Component {
                id: aComponent

                Label {
                    id: aLabel

                    Component.onCompleted: console.log(aLabel, myLoader.item)
                    Component.onDestruction: console.log("destruction", aLabel)

                    objectName: "aLabel"
                    text: objectName

                    Connections {
                        function onSomthingTriggered() {
                            console.log("onSomthingTriggered");
                        }

                        target: root
                    }
                }
            }
            Component {
                id: bComponent

                Label {
                    id: bLabel

                    Component.onCompleted: console.log(bLabel, myLoader.item)
                    Component.onDestruction: console.log("destruction", bLabel)

                    objectName: "bLabel"
                    text: objectName

                    Connections {
                        function onSomthingTriggered() {
                            console.log("onSomthingTriggered");
                        }

                        target: root
                    }
                }
            }
        }
        Item {
            Layout.fillHeight: true
        }
    }
}