import QtQuick
import QtQuick.Controls

Rectangle {
    id: replaySidebar
    width: parent.width * 1 / 4
    height: parent.height

    Column {
        anchors.fill: parent
        spacing: 10
        padding: 10

        Button {
            text: "Add Replay"
            onClicked: {
                addItemDialog.open()
            }
            width: parent.width - 20
        }

        ListView {
            id: listView
            width: parent.width - 20
            height: parent.height
            model: itemList

            delegate: Item {
                width: listView.width
                height: 40

                Rectangle {
                    id: background
                    color: model.selected ? "lightblue" : "white" // Change color if selected
                    anchors.fill: parent
                    border.color: "gray"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            // Deselect all items first
                            for (var i = 0; i < itemList.count; i++) {
                                itemList.setProperty(i, "selected",
                                                     false) // Deselect
                            }
                            // Select the clicked item
                            model.selected = true // Select this item
                            console.log(model.uuid)
                            replay_uuid = model.uuid // Assuming replay_uuid is declared elsewhere

                            for (var j = 0; j < markers.length; j++) {
                                markers[j].visible = false // Unsichtbar machen
                                markers[j].parent = null   // Parent entfernen
                                markers[j].destroy()       // Objekt zerstören
                            }
                            markers = [] // Leere das Marker-Array
                        }
                    }
                }
                Button {
                    text: "Delete"
                    width: 80
                    padding: 10
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    background: Rectangle {
                        color: "red"
                    }

                    onClicked: {
                        logic.replayHelper.deleteReplay(model.uuid)
                    }
                }
                Text {
                    text: model.name
                    color: "black"
                    anchors.centerIn: parent
                }
            }
        }
    }

    Component.onCompleted: {
        logic.replayHelper.fetchReplays()
    }

    Connections {
        target: logic.replayHelper

        function onReplaysFetched(replays) {
            itemList.clear()
            for (var i = 0; i < replays.length; i++) {
                itemList.append({
                                    "name": replays[i].name,
                                    "uuid": replays[i].uuid,
                                    "time_created": replays[i].time_created,
                                    "selected": false
                                })
            }
        }
    }
}