import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Dialogs 1.2
import QtQml.Models 2.1

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

    property bool globalDisplay: true
    Button {
        id: switchBtn
        text: "Switch"
        onClicked: globalDisplay = !globalDisplay

    }

    ListModel {
        id: myModel
        ListElement { display: "One" ; category: "1" }
        ListElement { display: "Two" ; category: "1" }
        ListElement { display: "Three" ; category: "1" }
        ListElement { display: "Four" ; category: "2" }
        ListElement { display: "Five" ; category: "2" }
        ListElement { display: "Six" ; category: "1" }
        ListElement { display: "Seven" ; category: "2" }
        ListElement { display: "Eight" ; category: "1" }
    }

    //![0]
    DelegateModel {
        id: visualModel
        delegate: Package {
            Text { id: listDelegate; width: wrapper.width; height: wrapper.height; Package.name: 'list' }
            Text { id: flowDelegate; width: wrapper.width; height: wrapper.height; Package.name: 'flow' }

            Rectangle {
                id: wrapper
                height: 25
                width: 30
                color: 'lightsteelblue'

                Text { text: display; anchors.centerIn: parent }
                state: globalDisplay ? 'inGrid' : 'inList'
                states: [
                    State {
                        name: 'inList'
                        ParentChange { target: wrapper; parent: listDelegate ;
                            x:0; y:0 }
                    },
                    State {
                        name: 'inGrid'
                        ParentChange {
                            x:0; y:0
                            target: wrapper; parent: flowDelegate
                        }
                    }
                ]

                transitions: [
                    Transition {
                        ParentAnimation {
                            NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
                        }
                    }
                ]
            }
        }
        model: myModel
    }

    ListView {
        id: lv

        width: parent.width
        anchors {
            bottom: parent.bottom
            top: switchBtn.bottom
        }

        model: visualModel.parts.list
        visible: !globalDisplay

        section.property: "category"
        section.delegate: Rectangle {
            color :"lightblue"
            width: parent.width
            height: 25
            Text {
                anchors.fill: parent
                text: section
            }
        }

    }

    Flow {
        width: parent.width
        anchors {
            bottom: parent.bottom
            top: switchBtn.bottom
        }

        Repeater {
           model: visualModel.parts.flow
        }
        visible: globalDisplay
    }
}