pragma Singleton
pragma ComponentBehavior: Bound

import QtQuick
import Quickshell
import QtQuick.Layouts
import Quickshell.Wayland
import Quickshell.Services.Pipewire

Singleton {
    id: audioPopup
    property bool popupOpen: true

    property var volume: sink.ready ? audioPopup.sink.audio.volume : 0

    property var visible: volume

    property PwNode sink: Pipewire.defaultAudioSink

    // bind the node so we can read its properties
    PwObjectTracker {
        objects: [audioPopup.sink]
    }

    Timer {
        id: timer
        interval: 3000
        running: false
        repeat: false

        onTriggered: audioPopup.visible = false
    }

    LazyLoader {
        id: loader
        activeAsync: audioPopup.popupOpen

        PanelWindow {
            id: popup
            width: 400
            height: 30
            visible: true

            // Give the window an empty click mask so all clicks pass through it.
            mask: Region {}

            // Use the wlroots specific layer property to ensure it displays over
            // fullscreen windows.
            WlrLayershell.layer: WlrLayer.Overlay

            color: "transparent"

            anchors {
                bottom: true
            }

            margins {
                bottom: 250
            }

            Rectangle {
                id: rect
                Layout.fillWidth: true
                anchors.verticalCenter: parent.verticalCenter
                color: "white"
                height: parent.height
                width: parent.width
                radius: 5
                opacity: 0

                anchors {
                    left: parent.left
                }

                Behavior on width {
                    NumberAnimation {
                        duration: 200
                        easing.type: Easing.OutCubic
                    }
                }

                Rectangle {
                    color: "black"
                    height: 20
                    radius: height / 2

                    anchors {
                        left: parent.left
                    }

                    topLeftRadius: 0
                    bottomLeftRadius: 0

                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.width * audioPopup.sink.audio.volume
                }
            }
        }
    }

    function init() {
    }
}