import QtQuick
import QtCore
import QtQuick.Layouts

RowLayout {
    id: root

    required property ListModel model

    signal selectedChanged(string name)

    spacing: Dimensions.m

    Repeater {
        model: root.model

        Item {
            id: item

            required property int index
            required property var modelData
            property real padding: Dimensions.m

            height: text.height + padding * 2
            width: text.width + padding * 2

            Rectangle {
                anchors.fill: parent
                border.color: modelData.selected ? Colors.transparent : Colors.foreground
                border.width: 2
                color: modelData.selected ? Colors.primary : Colors.transparent
                radius: parent.height
            }
            Text {
                id: text

                color: Colors.foreground
                font: Typography.body
                text: modelData.text
                x: parent.padding
                y: parent.padding
            }
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor

                onPressed: {
                    if (item.modelData.selected)
                        return;
                    const model = root.model;
                    for (let i = 0; i < model.count; i++) {
                        model.setProperty(i, "selected", false);
                    }
                    model.setProperty(item.index, "selected", true);
                    selectedChanged(item.modelData.name)
                }
            }
        }
    }
}