import Quickshell
import Quickshell.Io
import QtQuick
import QtQuick.Layouts
import Quickshell.Widgets
import Quickshell.Services.Pipewire
import QtQuick.VectorImage
import QtQuick.Effects
import "common" as Common

Rectangle {
    id: root
    implicitWidth: itemContent.width + 4
    implicitHeight: 24
    radius: 5.5
    Layout.alignment: Qt.AlignVCenter
    color: "#2a2a2a" // Define item color
    RowLayout {
        id: itemContent
        Repeater {
            model: [
                {
                    on: "../../assets/bar/V2/speaker.svg",
                    off: "../../assets/bar/V2/speakerOff.svg",
                    node: root.speakerNode
                },
                {
                    on: "../../assets/bar/V2/mic.svg",
                    off: "../../assets/bar/V2/micOff.svg",
                    node: root.microphoneNode
                },
            ]
            Item {
                implicitWidth: 24
                implicitHeight: 24
                // anchors.centerIn: parent
                VectorImage {
                    id: svgImage
                    width: parent.width
                    height: parent.height
                    source: modelData.node.audio.muted ? modelData.off : modelData.on
                    visible: false
                    fillMode: Image.PreserveAspectFit // Adjusts the SVG while keeping the aspect ratio
                }
                MultiEffect {
                    source: svgImage
                    width: parent.width
                    height: parent.height
                    // anchors.centerIn: parent
                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                    colorization: 1
                    brightness: 1
                    colorizationColor: modelData.node.audio.muted ? "#e53b3c" : "#b1b2b5"
                }
            }
        }
    }
}
