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

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

    Repeater {
        model: SystemTray.items
        Column{
            Rectangle{
                width: iconImage.width + 8
                height: (bar.height-trayItem.height)/2
                color: "transparent"
            }
            Rectangle {  //trayItem
                id: trayItem
                width: iconImage.width + 8
                height: iconImage.height + 8
                radius: 4
                color: "transparent"
                border.width: 2

                Process {
                    id: steamRunner
                    command: ["steam", "steam://open/main"]
                    running: false
                }

                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)
                            }
                            if (modelData.title.trim()==="Steam") {
                                steamRunner.startDetached()
                            }
                            break
                        case Qt.MiddleButton:
                            modelData.secondaryActivate()
                            break
                        // case Qt.RightButton:
                        //     if (modelData.hasMenu) {
                        //         console.log('Activcate menu of ', modelData.title)
                        //         menuAnchor.open()
                        //     }
                        //     break
                        }
                    }

                    // QsMenuAnchor {
                    //     id: menuAnchor
                    //     menu: modelData.menu
                    //     anchor.window: menuHost
                    // }

                    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; Does not work for some tray icons
                    fillMode: Image.PreserveAspectCrop

                    anchors.centerIn: parent

                    width: bar.height*0.5
                    height: bar.height*0.5

                    // Component.onCompleted: {
                    //     // Default to the original icon
                    //     let src = modelData.icon;
                    //     // console.log("########## icon: " + modelData.icon)

                    //     // Check if there is a "?" in the URL (custom path)
                    //     if (src.includes('goxlr')) {
                    //         let pathMatch = src.match(/path=([^&]+)/);
                    //         if (pathMatch && pathMatch[1]) {

                    //             let folderPath = pathMatch[1];
                    //             // Build a file:// URL pointing to the actual icon file
                    //             let segments = folderPath.split('/');
                    //             let fileName = segments[segments.length - 1] + "-icon.png";
                    //             console.log("########## filename: " + fileName)
                    //             console.log("########## icon: " + modelData.icon)
                    //             src = "file://" + pathMatch[1] + "/" + fileName;
                    //         }
                    //     }

                    //     // Set the resolved source
                    //     iconImage.source = src;

                    //     // console.log("Resolved icon source:", src);
                    // }
                    asynchronous: true
                    cache: true
                }

                Timer {
                    interval: 10000
                    running: true
                    repeat: true
                    triggeredOnStart: true
                    onTriggered: {
                        let src = modelData.icon;
                        // console.log("########## icon: " + modelData.icon)

                        // Check if there is a "?" in the URL (custom path)
                        if (src.includes('goxlr')) {
                            let pathMatch = src.match(/path=([^&]+)/);
                            if (pathMatch && pathMatch[1]) {

                                let folderPath = pathMatch[1];
                                // Build a file:// URL pointing to the actual icon file
                                let segments = folderPath.split('/');
                                let fileName = segments[segments.length - 1] + "-icon.png";
                                // console.log("########## filename: " + fileName)
                                // console.log("########## icon: " + modelData.icon)
                                src = "file://" + pathMatch[1] + "/" + fileName;
                            }
                        }

                        // Set the resolved source
                        iconImage.source = src;
                    }
                }
            }
        }
    }
}