import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Widgets
import Quickshell.Services.SystemTray
import qs.Common

WrapperRectangle {
    id: systrayRoot
    property var monitor: ""
    rightMargin: Theme.gaps
    leftMargin: Theme.gaps
    radius: 25

    color: Theme.backgroudColor

    // color: Theme.backgroudColor
    RowLayout {
    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
        Repeater {
            model: SystemTray.items.values
            delegate: Rectangle {
                id: systrayItem

                required property var modelData
                property var model: modelData
                property string iconSource: {
                    let icon = systrayItem.model && systrayItem.model.icon;
                    if (typeof icon === 'string' || icon instanceof String) {
                        if (icon.includes("?path=")) {
                            const split = icon.split("?path=");
                            if (split.length !== 2) {
                                return icon;
                            }

                            const name = split[0];
                            const path = split[1];
                            const fileName = name.substring(name.lastIndexOf("/") + 1);
                            return `file://${path}/${fileName}`;
                        }
                        return icon;
                    }
                    return "";
                }

                implicitHeight: 30
                implicitWidth: 30
                color:"transparent"

                IconImage {
                    anchors.verticalCenter:parent.verticalCenter
                    anchors.horizontalCenter:parent.horizontalCenter
                    width:25; height:25
                    source: iconSource
                }


                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onClicked: (mouse) => {
                        if (mouse.button === Qt.RightButton) { 

                            const globalPos = mapToGlobal(0, 0);

                            const currentScreen = systrayRoot.monitor
                            const screenX = currentScreen.x || 0;
                            console.log(screenX)
                            const relativeX = globalPos.x - screenX;
                            menuAnchor.menu = systrayItem.model.menu;
                            menuAnchor.anchor.window = root;
                            menuAnchor.anchor.rect = Qt.rect(
                                globalPos.x,
                                globalPos.y+10, 
                                1, 
                                1
                            );
                            menuAnchor.open();
                            
                        } else if (mouse.button === Qt.LeftButton) {
                            // systrayItem.model.activate()
                        }
                    }
                    onDoubleClicked: {
                            systrayItem.model.activate()
                    }
                }
            }
        }
    }

    QsMenuAnchor {
        id: menuAnchor

    }
}