import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Widgets
import '../bar/states/Audio'
import "../../config"

LazyLoader {
    active: Source.volumeChanged
    

    PanelWindow {
        // Since the panel's screen is unset, it will be picked by the compositor
        // when the window is created. Most compositors pick the current active monitor.

        anchors.bottom: true
        margins.bottom: screen.height / 5 - implicitHeight
        exclusiveZone: 0

        implicitWidth: Config.focusedMonitor.width/5
        implicitHeight: Config.focusedMonitor.height/40
        color: "transparent"

        // An empty click mask prevents the window from blocking mouse events.
        mask: Region {}


        Rectangle {
            anchors.fill: parent
            radius: height / 2
            color: "transparent"

            RowLayout {
                anchors {
                    fill: parent
                    leftMargin: 10
                    rightMargin: 15
                }

                Text {
                    Layout.alignment: Qt.AlignVCenter

                    text: Source.mute ? "󰍭" : "󰍬"
                    font.pixelSize: 30

                    color: Colors.primary
                }

                Rectangle {
                    // Stretches to fill all left-over space
                    Layout.fillWidth: true

                    implicitHeight: 10
                    radius: 20
                    color: "#50ffffff"

                    Rectangle {
                        anchors {
                            left: parent.left
                            top: parent.top
                            bottom: parent.bottom
                        }
                        implicitWidth: parent.width * (Source.volume/100 ?? 0)
                        radius: parent.radius

                        color: Colors.primary
                    }
                }

                Text {
                    Layout.alignment: Qt.AlignRight
                   
                    text: Source.volume + "%"
                    font.pixelSize: 30

                    color: Colors.primary
                }
            }
        }
    }
}