import QtQuick
import QtQuick.Controls.Material

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Item {
        id: root
        anchors.fill: parent
        onStateChanged: print(state)
        state: "hide"
        Button {
            text: "click"
            onClicked: {
                root.toggle()
            }
        }

        function toggle() {
            if (root.state === "show")
                root.state = "hide"
            else
                root.state = "show"
        }

        Rectangle {
            id: controlPanel
            height: 40
            color: "orange"
            anchors {
                right: parent.right
                bottom: parent.bottom
                bottomMargin: 0
                onBottomMarginChanged: print(controlPanel.anchors.bottomMargin)
                left: parent.left
            }
        }
        states: [
            State {
                name: "show"
                PropertyChanges {
                    // ⚠️ Results in warnings:
                    // 1: You should remove any bindings on the "target" property and
                    // avoid custom-parsed bindings in PropertyChanges.

                    // 2: Property "anchors" is custom-parsed in PropertyChanges.
                    // You should phrase this binding as "controlPanel.anchors: anchors"

                    // Works
                    // target:controlPanel
                    // anchors.bottomMargin: 0
                    // \Wroks

                    // ❌ Does not work and no error
                    controlPanel.anchors.bottomMargin: 0
                    // or
                    // controlPanel {
                        // anchors.bottomMargin: 0
                    // }
                }
            },
            State {
                name: "hide"
                PropertyChanges {
                    // Works
                    // target:controlPanel
                    // anchors.bottomMargin: -controlPanel.height
                    // \Wroks

                    // ❌ Does not work and no error
                     controlPanel.anchors.bottomMargin: -controlPanel.height
                    // or
                    // controlPanel {
                        // anchors.bottomMargin: -controlPanel.height
                    // }
                }
            }
        ]
        transitions: [
            Transition {
                from: "show"
                to: "hide"
                reversible: true
                PropertyAnimation {
                    target: controlPanel
                    easing.type: Easing.OutCubic
                    duration: 500
                    property: "anchors.bottomMargin"
                }
            }
        ]
    }
}