import QtQuick
import Quickshell
import Quickshell.Hyprland
import Quickshell.Services.SystemTray
import "../../../colors"

Row {   // Workspace Row
    id: trayRow
    spacing: 8

    Repeater {
        model: SystemTray.items

        Rectangle {  //trayItem
            id: trayItem
            width: bar.height
            height: bar.height
            radius: 4
            color: "transparent"
            border.width: 2

            // Text {
            //     id: iconName
            //     text: modelData.Name
            //     anchors.centerIn: parent
            //     color: "white"
            //     font.pixelSize: 18
            //     font.family: "Inter, sans-serif"
            // }
            MouseArea {
                id: workspaceButton
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
                onClicked: (mouse) => {
                    switch (mouse.button) {
                    case Qt.LeftButton:
                        if (!modelData.onlyMenu) {
                            modelData.activate()
                            console.log('Activcate function of ', modelData.title)
                        }
                        break
                    case Qt.MiddleButton:
                        modelData.secondaryActivate?.()
                        console.log('Activcate secondary function of ', modelData.title)
                        break
                    case Qt.RightButton:
                        if (modelData.hasMenu) {
                            console.log('Activcate menu of ', modelData.title)
                            menuAnchor.open(modelData.menu)
                        }
                        break
                    }
                }

                QsMenuAnchor {
                    id: menuAnchor
                    menu: modelData.menu
                    anchor.window: trayItem
                }

                Rectangle {
                    anchors.fill: parent
                    color:  workspaceButton.containsMouse ? Colors.tertiaryContainer
                         : modelData.active ? Colors.primaryContainer
                         : Colors.secondaryContainer
                    border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg
                         : modelData.active ? Colors.primaryContainer_fg
                         : Colors.secondaryContainer_fg
                    radius: 6
                }

            }

            Image { // Image
                id: iconImage
                source: modelData.icon
                fillMode: Image.PreserveAspectCrop

                anchors.centerIn: parent

                width: bar.height*0.75
                height: bar.height*0.75

                asynchronous: true
                cache: true
            }
        }
    }
}