import QtQuick 2.0

Item {
    width: 200
    height: 442

    ListModel {
        id: listModel
        ListElement {
            name: "h1"
            txt: "Header 1"
            header: true
            collapsed: true
        }
        ListElement {
            name: "h2"
            txt: "Header 2"
            header: true
            collapsed: true
        }
        ListElement {
            name: "h3"
            txt: "Header 3"
            header: true
            collapsed: true
        }

        function indexFromName(name) {
            for (var i = 0; i < count; i++)
                if (get(i).name === name)
                    return i

            console.warn("Did not find index for name " + name)
            return -1
        }
    }

    function populateModel(prefix, index, n) {
        for (var k = 1; k <= n; k++) {
            var name = prefix + k
            var data = {
                "collapsed": false,
                "name": name,
                "txt": name,
                "header": false
            }
            listModel.insert(index + k, data)
        }
    }

    function h2(open) {
        var i = listModel.indexFromName("h2")
        if (listModel.get(i).collapsed === !open)
            return

        listModel.setProperty(i, "collapsed", !open)

        var n = 15
        if (open) {
            h3(false)
            populateModel("c2_", listModel.indexFromName("h2"), n)
        } else {
            listModel.remove(i + 1, n)
        }

    }

    function h3(open) {
        var i = listModel.indexFromName("h3")
        if (listModel.get(i).collapsed === !open)
            return

        listModel.setProperty(i, "collapsed", !open)

        var n = 6
        if (open) {
            h2(false)
            populateModel("c3_", listModel.indexFromName("h3"), n)
        } else {
            listModel.remove(i + 1, n)
        }
    }

    ListView {
        id: listView
        width: parent.width
        height: parent.height
        cacheBuffer: 0
        model: listModel

        property bool transitionsDone: false
        property int runningTransitions: 0
        onRunningTransitionsChanged: {
            if (runningTransitions === 0)
                transitionsDone = true
        }

        displaced: Transition {
            id: dispTrans
            SequentialAnimation {
                ScriptAction {
                    script: listView.runningTransitions++
                }
                NumberAnimation {
                    property: "y";
                    duration: 250
                }
                ScriptAction {
                    script: listView.runningTransitions--
                }
            }
        }

        delegate: Rectangle {
            id: rect
            color: header ? "yellow" : "cyan"
            border.color: "black"
            height: 50
            width: parent.width

            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                text: txt
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    listView.currentIndex = index
                    var i = listModel.indexFromName("h3")
                    if (i === -1)
                        return;
                    var isCollapsed = listModel.get(i).collapsed
                    if (name === "h2")
                        h2(isCollapsed)
                    else if (name === "h3")
                        h3(isCollapsed)
                }
            }
        }
    }
}