import QtQuick
import "../../../config"
import "../states/Audio"
import Quickshell.Hyprland

MouseArea {
    id: audioButton

    width: Math.max(audioRow.width + Config.bar_spacing_fun(height)*3.5, height)
    height: bar.height
    hoverEnabled: true
    cursorShape: Qt.PointingHandCursor
    enabled: Sink.exists

    Rectangle {
        anchors.fill: parent
        color: audioButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
        radius: Config.radius_fun(audioButton.height)
        border.width: Config.border_width
        border.color: audioButton.containsMouse ? Colors.tertiaryContainer_fg
            : Colors.secondaryContainer_fg

        Row {
            id: audioRow
            width: audioSourceText.width + audioSinkText.width + audioPercentageText.width + Config.bar_spacing_fun(height)*2
            height: parent.height
            spacing: Config.bar_spacing_fun(height)/2
            anchors.centerIn: parent

            Text {
                id: audioSourceText
                text: (Source.mute ? "󰍭" :
                "󰍬")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: Config.iconSize(bar.height)
                font.family: Config.font
                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
                rightPadding: Config.bar_spacing_fun(height)*1.5
            }

            Text {
                id: audioSinkText
                text: (Sink.mute ? "󰝟" : 
                Sink.volume > 60 ? "󰕾" :
                Sink.volume > 30 ? "󰖀" :
                "󰕿")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: Config.iconSize(bar.height)
                font.family: Config.font
                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
            }

            Text {
                id: audioPercentageText
                text: Sink.volume + "%"
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: Config.iconSize(bar.height)
                font.family: Config.font
                color: audioButton.containsMouse ? Colors.tertiary_fg : Colors.primary
            }
        }
    }
}