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

LazyLoader {
    active: Sink.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
        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.AlignLeft
                    rightPadding: (text == "󰕿" || text == "󰸈" ? font.pixelSize/4 : text == "󰖀" ? font.pixelSize/6 : 0)
                    leftPadding: (text == "󰕿" || text == "󰸈" ? -font.pixelSize/15 : 0)
                   
                    text: (
                        Sink.mute ? "󰝟" : 
                        Sink.volume > 60 ? "󰕾" :
                        Sink.volume > 30 ? "󰖀" :
                        Sink.volume > 0 ? "󰕿" :
                        "󰸈")
                    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 * (Sink.volume/100/1.5 ?? 0)
                        radius: parent.radius

                        color: Sink.volume/100 > 1 ? Colors.tertiary : Colors.primary
                    }
                }

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

                    color: Colors.primary
                }
            }
        }
    }
}