import QtQuick
import qs.config
import qs.components
import qs.services

// Right section: the volume button, which also opens the brightness slider.
// The sliders live in ControlsPanel.qml as a separate layer surface.
Item {
    id: root

    required property var bar

    readonly property int percent: Math.round(Audio.volume * 100)

    // Nothing to control — no pipewire sink and no backlight — means no button.
    visible: Audio.available || Brightness.available

    implicitWidth: button.implicitWidth

    PanelButton {
        id: button

        anchors.verticalCenter: parent.verticalCenter
        height: root.height - Theme.spacing
        minContentWidth: Theme.iconSize
        active: panel.visible
        activeColor: Theme.accent
        acceptedButtons: Qt.LeftButton | Qt.MiddleButton

        onClicked: event => {
            // Middle click mutes, the way it does on most panels.
            if (event.button === Qt.MiddleButton)
                Audio.toggleMute();
            else
                Session.toggle("controls", panel.screenName);
        }

        Row {
            spacing: Theme.spacing

            VolumeGlyph {
                size: Theme.iconSize
                struck: Audio.muted || !Audio.available
                level: !Audio.available || Audio.muted ? 0 : Audio.volume > 0.5 ? 2 : Audio.volume > 0 ? 1 : 0
                color: button.active ? Theme.background : Audio.muted || !Audio.available ? Theme.textDim : Theme.text
                dimColor: button.active ? Qt.rgba(Theme.background.r, Theme.background.g, Theme.background.b, 0.4) : Theme.border
            }

            Text {
                height: Theme.iconSize
                verticalAlignment: Text.AlignVCenter
                visible: Audio.available
                text: root.percent + "%"
                color: button.active ? Theme.background : Audio.muted ? Theme.textDim : Theme.text
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.bold: true
            }
        }
    }

    // Scrolling the button changes the volume without opening anything, which
    // is the fastest way to nudge it with a pointer.
    WheelHandler {
        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
        enabled: Audio.available

        onWheel: event => {
            const notches = event.angleDelta.y / 120;
            if (notches !== 0)
                Audio.step(notches * Config.volumeStep);
        }
    }

    ControlsPanel {
        id: panel

        bar: root.bar
    }
}