import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    Column {
        anchors.fill: parent

        // transitions are customisable via the component api
        property alias displaced: view.displaced
        property alias add: view.add
        property alias remove: view.remove

        Container {
            id: container
            width: parent.width
            height: 200
            contentItem: ListView {
                id: view
                model: container.contentModel
                spacing: 5
                // example (normally such a transition would be injected by the client)
                displaced: Transition {
                    NumberAnimation {
                        properties: "y"
                        duration: 100
                    }
                }
            }
        }
        Row {
            Button {
                text: "add"
                onClicked: {
                    let item = component.createObject(container);
                    item.width = width;
                    container.addItem(item);
                }
            }
            Button {
                text: "remove"
                // Items are removed and animated off correctly, but never freed:
                // onClicked: {
                //     let item = container.contentChildren[0];
                //     item.parent = null;
                // }

                // Crash in qtquick transition code:
                onClicked: {
                   let item = container.contentChildren[0];
                   if (item) {
                       container.removeItem(item);
                   }
                }

            }
        }
        Component {
            id: component
            Rectangle {
                height: 50
                color: "hotpink"
                Component.onCompleted: console.log("Construction!")
                Component.onDestruction: console.log("Destruction!")
            }
        }
    }
}