import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml.Models 2.12

Window {
    id: window
    visible: true
    width: 800
    height: 480

    property list<QtObject> myModel: [
        QtObject { property string name: "Item 0"; property bool selected: true },
        QtObject { property string name: "Item 1"; property bool selected: true },
        QtObject { property string name: "Item 2"; property bool selected: true },
        QtObject { property string name: "Item 3"; property bool selected: true },
        QtObject { property string name: "Item 4"; property bool selected: true },
        QtObject { property string name: "Item 5"; property bool selected: true },
        QtObject { property string name: "Item 6"; property bool selected: true },
        QtObject { property string name: "Item 7"; property bool selected: true },
        QtObject { property string name: "Item 8"; property bool selected: true },
        QtObject { property string name: "Item 9 - Hidden"; property bool selected: false },
        QtObject { property string name: "Item 10 - Hidden"; property bool selected: false }
    ]

    DelegateModel {
        id: visualModel
        model: myModel
        filterOnGroup: "selected"

        groups: [
            DelegateModelGroup {
                name: "selected"
                includeByDefault: true
            }
        ]

        delegate: Rectangle {
            width: 180
            height: 180
            visible: DelegateModel.inSelected
            color: ListView.isCurrentItem ? "orange" : "yellow"
            Component.onCompleted: {
                DelegateModel.inPersistedItems = true
                DelegateModel.inSelected = Qt.binding(function() { return model.selected })
                console.log("create element " + model.index + "-" + this + "-name="+ model.name +"-inSelected=" + DelegateModel.inSelected)
            }

            Text {
                anchors.centerIn: parent
                Component.onDestruction: console.log("destroy element " + model.index + "-" + this + "-name="+ text)
                text: model.name
            }
        }
    }

    ListView {
        anchors.fill: parent
        spacing: 180/15
        orientation: ListView.Horizontal
        model: visualModel
        focus: true
        currentIndex: 0
        preferredHighlightBegin: (width-180)/2
        preferredHighlightEnd: (width+180)/2
        highlightRangeMode: ListView.StrictlyEnforceRange
        highlightMoveDuration: 300
        highlightMoveVelocity: -1

        highlight: Item {
            width: 180
            height: width
            Rectangle {
                anchors.fill: parent
                anchors.margins: -3
                border.color: "black"
                border.width: 2
            }

        }

        Keys.onReturnPressed: {
            //Set to last item
            currentIndex = count-1
        }
        id: lv
    }

    Text {
        id: t
        anchors.centerIn: parent
        text: "Current index: " + lv.currentIndex + "\nItem count: " + visualModel.count
    }
}