import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Page {
    width: 300
    height: 600
    header: ComboBox {
        id: groups

        currentIndex: -1
        displayText: currentIndex == -1 ? "select a group" : currentText
        model: ruleGroupsModel
        textRole: "name"

        onCurrentIndexChanged: {
            rulesView.model = model.data(model.index(currentIndex, 0),
                                         model.roleValue('rulesModel'))
        }
    }

    Timer {
        id: timer
        interval: 1000
        repeat: true
        running: false
        property int count: 0
        onTriggered: {
            count += 1
            var idx = count % groups.model.rowCount()
            console.log('timer trigger', idx, count)
            groups.currentIndex = idx
        }
    }

    Component {
        id: ruleDelegate
        RowLayout {

            id: ruleName
            width: 300
            height: 40

            Label {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: ["<b>", model.name, "<b>"].join('')
                Layout.fillWidth: true
                Layout.preferredWidth: 3
            }
        }
    }

    GridView {
        id: rulesView

        anchors.fill: parent

        cellHeight: 50
        cellWidth: 220

        delegate: ruleDelegate
    }

    Component.onCompleted: {
        timer.running = true
        console.log('mainload', ruleGroupsModel)
    }
}
