pragma ComponentBehavior: Bound
import Quickshell.Services.Pipewire
import Quickshell.Io
import Quickshell.Widgets
import Quickshell
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects
import qs
import qs.widgets
import qs.settings

BarComponent {
    id: root
    color: clickHandler.containsMouse ? Colors.activeModuleBg : Colors.moduleBg
    property PwNode defaultAudio: Pipewire.ready ? Pipewire.defaultAudioSink : null
    property bool mute: Pipewire.ready ? defaultAudio?.audio.muted : null
    implicitHeight: Config.moduleHeight
    implicitWidth: pwLayout.implicitWidth + 16
    function getVolumeIcon() {
        let volume = Pipewire.ready ? root.defaultAudio.audio.volume : null;
        if (root.mute) {
            return "audio-volume-muted";
        }
        if (volume <= 0.33) {
            return "audio-volume-low";
        }
        if (volume <= 0.66) {
            return "audio-volume-medium";
        }
        if (volume >= 0.66) {
            return "audio-volume-high";
        }
	
    }

    PwObjectTracker {
        objects: [Pipewire.ready ? Pipewire.defaultAudioSink : null]
    }

    Process {
        id: pavuLauncher
        command: ["pavucontrol"]
        running: false
    }

    RowLayout {
        id: pwLayout
        anchors.centerIn: root
        spacing: 4
	IconImage {
	    source: Quickshell.iconPath(root.getVolumeIcon() + "-symbolic", root.getVolumeIcon())
	    implicitSize: 14
	    layer.enabled: true
	    layer.effect: MultiEffect {
		colorization: 1.0
		colorizationColor: Colors.text
		brightness: 0.5
	    }
	}
        StyledText {
            text: Math.round(root.defaultAudio?.audio.volume * 100) + "%"
            opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0
        }
    }
    MouseArea {
        id: clickHandler
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton
        cursorShape: Qt.PointingHandCursor
        anchors.fill: root
        onClicked: volPopup.visible = !volPopup.visible
    }
    PopupWindow {
	id: volPopup
	anchor.item: root
	implicitWidth: 250
	implicitHeight: 600
		
	anchor.edges: Edges.Top 
	anchor.gravity: Edges.Bottom
	anchor.margins.top: 40
	color: 'transparent'
	Rectangle {
	    id: test
	    anchors.fill: parent
	    color: Colors.activeModuleBg
	    radius: Config.rounding
	    ListView {
		id: sourceLayout
		
		    model: Pipewire.nodes
		    delegate: Rectangle {
			implicitHeight: 10
			
			required property var modelData
			StyledText {
			    text: parent.modelData.nickname
			}
		    
		}
	    }
	}
    }
}