DroneTrackingPanel.qml

import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import "qrc:/gcsStyle" as GcsStyle
import "./components"
import "./components" as Components

/*
  Welcome to the wild west....
  We say GcsStyle.PanelStyle because that is how it is defined as a singleton
  Our singleton definition is in /gcsStyle/qmldir
  This might be some of the nastiest code ever written... CSS/QSS is hell
*/

Rectangle {
    id: mainPanel
    width: 350
    color: GcsStyle.PanelStyle.surfaceBackground
    border.color: GcsStyle.panelStyle.defaultBorderColor
    border.width: 0  // remove the border

    signal selectionChanged(var selectedDrones)     // Broadcast the current selection so other components (telemetry, commands, etc.) stay in sync
    signal activeDroneChanged(var anchor)     // Broadcast the current anchor which will be used as the active drone
    signal followRequested(var drone)     // Dedicated signal for the "follow" shortcut so main.qml can toggle map following

    property var selectedIndexes: [] // Stores which rows are selected
    property int lastSelectedIndex: -1 // Remembers last drone the user clicked (so Shift-click knows where to start)
    property int selectionAnchorIndex: -1 // Anchor index used for Shift-range selections
    property bool multiSelectActive: selectedIndexes.length > 1 
    property string activePanel: "drones"   // "drones", "discovery"
    RowLayout {
        anchors.fill: parent
        spacing: 0
        anchors.margins: parent.border.width

        // Left vertical bar
        Rectangle {
            // TODO: Turn each of these buttons that select the view into a component. 
            // This should just be a list

            Layout.fillHeight: true
            width: 65
            color: GcsStyle.PanelStyle.baseBackground
            clip: true
            border.color: GcsStyle.panelStyle.defaultBorderColor
            border.width: GcsStyle.panelStyle.defaultBorderWidth

            ColumnLayout {
                anchors.fill: parent
                anchors.topMargin: GcsStyle.PanelStyle.sidebarTopMargin
                spacing: GcsStyle.PanelStyle.buttonSpacing // Small space between buttons

                // Toggle button 1
                Rectangle {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: GcsStyle.PanelStyle.buttonSize
                    Layout.preferredHeight: GcsStyle.PanelStyle.buttonSize
                    
                    property bool hovered: false
                    
                    color: mainPanel.activePanel === "drones" ? GcsStyle.PanelStyle.buttonActiveColor 
                        : (hovered ? GcsStyle.PanelStyle.hoverBackground : GcsStyle.PanelStyle.buttonColor)

                    border.color: mainPanel.activePanel === "drones" ? GcsStyle.PanelStyle.listItemSelectedBorderColor : "transparent"
                    border.width: mainPanel.activePanel === "drones" ? GcsStyle.PanelStyle.defaultBorderWidth : 0
                    radius: 8

                    Image {
                        anchors.right: parent.right
                        anchors.rightMargin: GcsStyle.PanelStyle.iconRightMargin
                        anchors.verticalCenter: parent.verticalCenter
                        source: GcsStyle.PanelStyle.isLightTheme ? "qrc:/resources/droneSVG.svg" : "qrc:/resources/droneStatusDarkMode.svg"
                        sourceSize.width: GcsStyle.PanelStyle.iconSize
                        sourceSize.height: GcsStyle.PanelStyle.iconSize
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true                        
                        onEntered: parent.hovered = true          
                        onExited: parent.hovered = false 
                        onClicked: {
                            mainPanel.activePanel = "drones"
                            droneController.rebuildVariant()
                        }
                    }
                }

                // Toggle button 2 - Mission Planning
                Rectangle {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: GcsStyle.PanelStyle.buttonSize
                    Layout.preferredHeight: GcsStyle.PanelStyle.buttonSize
                    
                    property bool hovered: false
                    
                    color: mainPanel.activePanel === "mission" ? GcsStyle.PanelStyle.buttonActiveColor 
                        : (hovered ? GcsStyle.PanelStyle.hoverBackground : GcsStyle.PanelStyle.buttonColor)

                    border.color: mainPanel.activePanel === "mission" ? GcsStyle.PanelStyle.listItemSelectedBorderColor : "transparent"
                    border.width: mainPanel.activePanel === "mission" ? GcsStyle.PanelStyle.defaultBorderWidth : 0
                    radius: 8

                    Image {
                        anchors.right: parent.right
                        anchors.rightMargin: GcsStyle.PanelStyle.iconRightMargin
                        anchors.verticalCenter: parent.verticalCenter
                        source: GcsStyle.PanelStyle.isLightTheme ? "qrc:/resources/missionPlanningIcon.svg" : "qrc:/resources/missionPlanningIcon.svg"
                        sourceSize.width: GcsStyle.PanelStyle.iconSize
                        sourceSize.height: GcsStyle.PanelStyle.iconSize
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true                        
                        onEntered: parent.hovered = true          
                        onExited: parent.hovered = false 
                        onClicked: {mainPanel.activePanel = "mission"}
                    }
                }

                // Toggle button 3
                Rectangle {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: GcsStyle.PanelStyle.buttonSize
                    Layout.preferredHeight: GcsStyle.PanelStyle.buttonSize
                    
                    property bool hovered: false

                    color: mainPanel.activePanel === "discovery" ? GcsStyle.PanelStyle.buttonActiveColor 
                        : (hovered ? GcsStyle.PanelStyle.hoverBackground : GcsStyle.PanelStyle.buttonColor)

                    border.color: mainPanel.activePanel === "discovery" ? GcsStyle.PanelStyle.listItemSelectedBorderColor : "transparent"
                    border.width: mainPanel.activePanel === "discovery" ? GcsStyle.PanelStyle.defaultBorderWidth : 0
                    radius: 8

                    Image {
                        anchors.right: parent.right
                        anchors.rightMargin: GcsStyle.PanelStyle.iconRightMargin
                        anchors.verticalCenter: parent.verticalCenter
                        source: GcsStyle.PanelStyle.isLightTheme ? "qrc:/resources/discoveryPanelIcon.svg" : "qrc:/resources/discoveryPanelIconDarkMode.svg"
                        sourceSize.width: GcsStyle.PanelStyle.iconSize
                        sourceSize.height: GcsStyle.PanelStyle.iconSize
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true                        
                        onEntered: parent.hovered = true          
                        onExited: parent.hovered = false 
                        onClicked: {
                            mainPanel.activePanel = "discovery"
                            droneController.loadUnknownDrones()
                        }
                    }
                }
                Item { Layout.fillHeight: true } // Bottom spacer to push buttons up
            }
        }

        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 0

            // Header
            Rectangle {
                Layout.fillWidth: true
                height: 80 
                color: GcsStyle.PanelStyle.primaryColor
                radius: GcsStyle.PanelStyle.cornerRadius
                clip: true

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: GcsStyle.PanelStyle.defaultMargin
                    spacing: 0

                    Text {
                        text: {
                            switch (mainPanel.activePanel) {
                            case "drones":      return "Drone List"
                            case "mission":     return "Mission Planning"
                            case "discovery":   return "UAV Discovery"
                            }
                        }
                        font.pixelSize: GcsStyle.PanelStyle.headerFontSize
                        font.family: GcsStyle.PanelStyle.fontFamily
                        color: GcsStyle.PanelStyle.textOnPrimaryColor
                        font.underline: true
                    }

                    Text {
                        text: {
                            switch (mainPanel.activePanel) {
                            case "drones":
                                return droneController ? "Drones in fleet: " + droneController.drones.length : "0 drones in fleet"
                            case "mission":
                                return droneController ? "Drones in fleet: " + droneController.drones.length : "0 drones in fleet"
                            case "discovery":
                                return droneController ? droneController.unknownDrones.filter(u => !u.ignored).length + " discovered UAVs" : "0 discovered UAVs"
                            }
                        }
                        font.pixelSize: GcsStyle.PanelStyle.subHeaderFontSize
                        font.family: GcsStyle.PanelStyle.fontFamily
                        color: GcsStyle.PanelStyle.textOnPrimaryColor
                    }
                }
            }

            // ==========================================
            // Drone list view
            UAVListPanel {
                id: trackDroneListPanel
                panel: mainPanel
                listModel: droneController.drones
                inactiveCount: 0
                visible: mainPanel.activePanel === "drones"
            }

            // ==========================================
            // Mission Planning View
            UAVMissionListPanel {
                id: trackUAVMissionPanel
                panel: mainPanel
                listModel: droneController.drones
                visible: mainPanel.activePanel === "mission"
            }

            // ==========================================
            // Discovery panel view
            // TODO: Turn this panel into a component 
            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                visible: mainPanel.activePanel === "discovery"
                spacing: 0

                // Search bar
                Rectangle {
                    Layout.fillWidth: true
                    Layout.leftMargin: 8
                    Layout.rightMargin: 8
                    Layout.bottomMargin: 8
                    height: 36
                    color: GcsStyle.PanelStyle.baseBackground
                    border.color: GcsStyle.panelStyle.defaultBorderColor
                    border.width: GcsStyle.panelStyle.defaultBorderWidth
                    radius: 8

                    RowLayout {
                        anchors.fill: parent
                        anchors.leftMargin: GcsStyle.PanelStyle.defaultMargin
                        anchors.rightMargin: GcsStyle.PanelStyle.defaultMargin
                        spacing: 6

                        TextInput {
                            id: discoverySearchInput
                            Layout.fillWidth: true
                            color: GcsStyle.PanelStyle.textPrimaryColor
                            font.pixelSize: GcsStyle.PanelStyle.fontSizeMedium
                            font.family: GcsStyle.PanelStyle.fontFamily
                            clip: true

                            Text {
                                anchors.fill: parent
                                text: "Search..."
                                color: GcsStyle.PanelStyle.textSecondaryColor
                                font.pixelSize: GcsStyle.PanelStyle.fontSizeMedium
                                font.family: GcsStyle.PanelStyle.fontFamily
                                visible: !discoverySearchInput.text
                            }
                        }
                    }
                }
                ListView {
                    id: discoveryListView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true

                    property int selectedIndex: -1

                    model: droneController.unknownDrones.filter(u => !u.ignored)

                    delegate: Rectangle {
                        id: discoveredItem
                        width: ListView.view.width
                        clip: true

                        // Hides ignored drones
                        height: visible ? (expanded ? 110 : GcsStyle.PanelStyle.itemHeight) : 0
                        visible: !modelData.ignored // only shows the discovered drone if it isn't ignored

                        // local UI state
                        property bool expanded: false
                        property bool hovered: false
                        property bool selected: discoveryListView.selectedIndex === index

                        // when selected changes colors
                        color: selected
                            ? GcsStyle.PanelStyle.listItemSelectedColor
                            : (hovered
                                ? GcsStyle.PanelStyle.hoverBackground
                                : GcsStyle.PanelStyle.cardBackground)

                        border.color: selected
                            ? GcsStyle.PanelStyle.listItemSelectedBorderColor
                            : GcsStyle.panelStyle.defaultBorderColor
                        border.width: GcsStyle.panelStyle.defaultBorderWidth

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onEntered: discoveredItem.hovered = true
                            onExited: discoveredItem.hovered = false

                            onClicked: {
                                discoveredItem.expanded = !discoveredItem.expanded
                                discoveryListView.selectedIndex =
                                        (discoveryListView.selectedIndex === index )
                                            ? -1 : index
                            }
                        }

                        ColumnLayout {
                            anchors.left: parent.left
                            anchors.right: parent.right

                            RowLayout {
                                id: collapsedView
                                Layout.fillWidth: true
                                Layout.margins: GcsStyle.PanelStyle.defaultMargin
                                spacing: 15

                                //drone icon
                                Item {
                                    width: 23
                                    height: 23
                                    Layout.alignment: Qt.AlignVCenter
                                    Layout.leftMargin: 8

                                    Image {
                                        anchors.centerIn: parent
                                        source: GcsStyle.PanelStyle.isLightTheme
                                            ? "qrc:/resources/droneStatusLightMode.svg"
                                            : "qrc:/resources/droneStatusDarkMode.svg"
                                        sourceSize.width: GcsStyle.PanelStyle.iconSize + 8
                                        sourceSize.height: GcsStyle.PanelStyle.iconSize + 8
                                    }
                                }
                                ColumnLayout {
                                    Layout.fillWidth: true
                                    Layout.leftMargin: 8
                                    spacing: 2

                                    Text {
                                        text: modelData.uavType
                                        color: GcsStyle.PanelStyle.textPrimaryColor
                                        font.pixelSize: GcsStyle.PanelStyle.fontSizeMedium
                                        font.family: GcsStyle.PanelStyle.fontFamily
                                        Layout.fillWidth: true
                                        elide: Text.ElideRight
                                        font.bold: true
                                    }

                                    Text {
                                        text: "UID: " + modelData.uid;
                                        color: GcsStyle.PanelStyle.textPrimaryColor
                                        font.pixelSize: GcsStyle.PanelStyle.fontSizeXXS
                                        font.family: GcsStyle.PanelStyle.fontFamily
                                    }
                                    Text {
                                        text: "FC: " + modelData.fc;
                                        color: GcsStyle.PanelStyle.textPrimaryColor
                                        font.pixelSize: GcsStyle.PanelStyle.fontSizeXXS
                                        font.family: GcsStyle.PanelStyle.fontFamily
                                    }
                                }

                                RowLayout {
                                    Layout.alignment: Qt.AlignRight
                                    spacing: 4

                                    //spacer all buttons are pushed towards the right
                                    Item { Layout.fillWidth: true }

                                    // Add drone button
                                    Button {
                                        Layout.preferredHeight: 27
                                        Layout.preferredWidth: 27
                                        padding: 0

                                        contentItem: Item {
                                            anchors.fill: parent
                                            Image {
                                                anchors.centerIn: parent
                                                source: "qrc:/resources/plusIcon.png"
                                                height: GcsStyle.PanelStyle.statusIconSize
                                                width: GcsStyle.PanelStyle.statusIconSize
                                                fillMode: Image.PreserveAspectFit
                                            }
                                        }

                                        background: Rectangle {
                                            radius: GcsStyle.PanelStyle.buttonRadius
                                            color: "#b0ffa8"
                                        }

                                        MouseArea {
                                            // This mouse area gives us the ability to add a pointer hand when the button is hovered
                                            anchors.fill: parent
                                            hoverEnabled: true
                                            cursorShape: Qt.PointingHandCursor
                                            onClicked: {
                                                console.log("added!")
                                                droneController.acceptUnknownDrone(modelData.uid);
                                                discoveryListView.selectedIndex = -1
                                            }
                                        }
                                    }

                                    // Ignore drone button
                                    Button {
                                        Layout.preferredHeight: 27
                                        Layout.preferredWidth: 27
                                        padding: 0

                                        contentItem: Item {
                                            anchors.fill: parent
                                            Image {
                                                anchors.centerIn: parent
                                                source: "qrc:/resources/xIcon.png"
                                                height: GcsStyle.PanelStyle.statusIconSize
                                                width: GcsStyle.PanelStyle.statusIconSize
                                                fillMode: Image.PreserveAspectFit
                                            }
                                        }

                                        background: Rectangle {
                                            radius: GcsStyle.PanelStyle.buttonRadius
                                            color: "#ffa8a8"
                                        }

                                        MouseArea {
                                            // This mouse area gives us the ability to add a pointer hand when the button is hovered
                                            anchors.fill: parent
                                            hoverEnabled: true
                                            cursorShape: Qt.PointingHandCursor
                                            onClicked: {
                                                console.log("ignore")
                                                droneController.setUnknownDroneIgnored(modelData.uid, true)
                                                discoveryListView.selectedIndex = -1
                                            }
                                        }
                                    }
                                }
                            }

                            Item {
                                id: expandedView
                                visible: discoveredItem.expanded
                                Layout.fillWidth: true

                                ColumnLayout {
                                    anchors.fill: parent

                                    Text {
                                        Layout.fillWidth: true
                                        Layout.margins: GcsStyle.PanelStyle.defaultMargin

                                        text: "more drone info..."
                                        color: GcsStyle.PanelStyle.textPrimaryColor
                                        font.pixelSize: GcsStyle.PanelStyle.fontSizeXXS
                                        font.family: GcsStyle.PanelStyle.fontFamily
                                        
                                        horizontalAlignment: Text.AlignHCenter
                                    }
                                }
                            }
                        }
                    }
                    Connections {
                        target: droneController
                        function onUnknownDronesChanged() {
                            discoveryListView.model = droneController ? droneController.unknownDrones : []
                        }
                    }
                }
            }
        }
    }

//Helper Functions for drone selection
    // Function to clear current selection highlight
    function clearSelection() {
        updateSelection([], -1)
        selectionAnchorIndex = -1
        emitSelectionChanged()
    }

    // Select exactly one row (used for normal clicks and follow shortcut)
    function setSingleSelection(idx) {
        updateSelection([idx], idx)
        selectionAnchorIndex = idx
    }

    // Add/remove a row from the current selection while preserving order
    function toggleSelection(idx) {
        var newSelection = selectedIndexes.slice()
        var existing = newSelection.indexOf(idx)

        if (existing === -1) {
            newSelection.push(idx)
            updateSelection(newSelection, idx)
            selectionAnchorIndex = idx
        } else {
            newSelection.splice(existing, 1)
            var nextLast = newSelection.length > 0 ? newSelection[newSelection.length - 1] : -1
            updateSelection(newSelection, nextLast)
            if (selectionAnchorIndex === idx) {
                selectionAnchorIndex = nextLast
            }
        }
    }

    // Build a contiguous selection between two indexes (shift-click behavior)
    function selectRange(startIdx, endIdx) {
        if (startIdx === -1) {
            setSingleSelection(endIdx)
            return
        }

        var from = Math.min(startIdx, endIdx)
        var to = Math.max(startIdx, endIdx)
        var rangeSelection = []

        for (var i = from; i <= to; ++i) {
            rangeSelection.push(i)
        }

        updateSelection(rangeSelection, endIdx)
    }

    // Normalize, de-duplicate, and store the new selection state
    function updateSelection(selectionArray, lastIndex) {
        var sorted = selectionArray.slice().sort(function(a, b) { return a - b })
        var deduped = []

        for (var i = 0; i < sorted.length; ++i) {
            if (deduped.length === 0 || deduped[deduped.length - 1] !== sorted[i]) {
                deduped.push(sorted[i])
            }
        }

        selectedIndexes = deduped
        lastSelectedIndex = lastIndex
        syncCurrentIndex()
    }

    // Keep ListView's built-in currentIndex aligned with our selection rules
    function syncCurrentIndex() {
        if (selectedIndexes.length === 1) {
            trackDroneListPanel.uavListPanel.currentIndex = selectedIndexes[0]
        } else {
            trackDroneListPanel.uavListPanel.currentIndex = -1
        }
    }

    function isIndexSelected(idx) {
        return selectedIndexes.indexOf(idx) !== -1
    }

    // Turn selected indexes into real drone objects and emit the public signal
    function emitSelectionChanged() {
        var selected = []
        var model = trackDroneListPanel.uavListPanel.model

        for (var i = 0; i < selectedIndexes.length; ++i) {
            var idx = selectedIndexes[i]
            if (idx >= 0 && idx < trackDroneListPanel.uavListPanel.count) {
                var droneData = model && model[idx] !== undefined ? model[idx] : null
                if (droneData) {
                    selected.push(droneData)
                }
            }
        }

        selectionChanged(selected)
    }

    // Whenever the selection changes, the active drone has a chance of also changing
    // This will let main.qml know the active drone is updated
    onSelectionChanged: function(selected) {
        var idx = selectionAnchorIndex
        if (idx < 0 || idx >= trackDroneListPanel.uavListPanel.count) {
            activeDroneChanged(null)
            return
        }

        var model = trackDroneListPanel.uavListPanel.model
        var drone = model ? model[idx] : null

        activeDroneChanged(drone)
    }
}