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
    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
                    AbstractButton {
                        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
                            }
                        }

                        onClicked: console.log('clicked!')
                    }
                }
            }
        }


    }
}