import QtQuick 2.12

Rectangle {
    visible: true
    width: 600
    height: 400

    ListModel {
        id: animalsModel
        ListElement {
            name: "parrot"
            size: "Small"
        }
        ListElement {
            name: "crow"
            size: "Small"
        }
        ListElement {
            name: "Dog"
            size: "Medium"
        }
        ListElement {
            name: "Jackle"
            size: "Medium"
        }
        ListElement {
            name: "Rhino"
            size: "Big"
        }
        ListElement {
            name: "Elephant"
            size: "Big"
        }
    }


    Component {
        id: sectionHeading

        Rectangle {
            width: container.width
            height: childrenRect.height
            color: "lightsteelblue"

            Text {
                text: section
                font.bold: true
                font.pixelSize: 20
            }
        }
    }

    ListView {
        id: container
        anchors.fill: parent
        model: animalsModel
        spacing: 10
        boundsBehavior: ListView.StopAtBounds


        delegate: Text {
            id: textDelegate
            text: name; font.pixelSize: 18

            MouseArea {
                anchors.fill: parent

                onClicked: {
                    container.currentIndex = index
                    console.log("previous: " + textDelegate.ListView.previousSection)
                    console.log("current: " + textDelegate.ListView.section)
                    console.log("next: " + textDelegate.ListView.nextSection)
                }
            }
        }

        section.property: "size"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeading
    }
}