import QtQuick // for Text
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Services.SystemTray
import Quickshell.Widgets

Item {
    width: 10 + rep.count * (2 * lay.spacing + 20)
    height: 30
    visible: SystemTray.items.values.length != 0

    id: root
    property var window: null

    ClippingWrapperRectangle {
        radius: 5
        anchors.fill: parent
        RowLayout {
            id: lay
            spacing: 4
            Repeater {
                id: rep

                model: SystemTray.items
                ClippingWrapperRectangle {
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                    radius: 10
                    implicitWidth: 20
                    implicitHeight: 20
                    MouseArea {
                        anchors.fill: parent
                        
                        Image {
                            anchors.fill: parent
                            source: {
                                let icon = SystemTray.items.values[index].icon
                                if (icon.includes("?path=")) {
                                    const [name, path] = icon.split("?path=");
                                    icon = Qt.resolvedUrl(`${path}/${name.slice(name.lastIndexOf("/") + 1)}`);
                                }
                                return icon
                            }
                        }

                        acceptedButtons: Qt.LeftButton | Qt.RightButton

                        onClicked: (mouse) => {
                            if(mouse.button == Qt.LeftButton) {
                                SystemTray.items.values[index].activate()
                            } else if(mouse.button == Qt.RightButton) {
                                SystemTray.items.values[index].display(root.window, root.x + root.parent.x, 40)
                            }
                        }
                    }
                }
            }
        }


    }
}