import QtQuick
import qs.Common
import qs.Services
import qs.Widgets

Item {
    id: widget

    readonly property real sectionSpacing: Theme.spacingS

    GameBarVolumeRow {
        id: outputVolume

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        node: AudioService.sink
        maxPercent: AudioService.sinkMaxVolume
        activeIcon: "volume_up"
        mutedIcon: "volume_off"
    }

    StyledText {
        id: outputLabel

        anchors.top: outputVolume.bottom
        anchors.left: parent.left
        text: "Output"
        font.pixelSize: Theme.fontSizeSmall
        color: Theme.surfaceVariantText
    }

    GameBarDeviceList {
        id: outputDevices

        anchors.top: outputLabel.bottom
        anchors.topMargin: Theme.spacingXS
        anchors.left: parent.left
        anchors.right: parent.right
        height: Math.max(52, (parent.height - outputVolume.height - inputVolume.height - outputLabel.height - inputLabel.height - widget.sectionSpacing * 3 - Theme.spacingXS * 2) * 0.5)
        isSink: true
    }

    GameBarVolumeRow {
        id: inputVolume

        anchors.top: outputDevices.bottom
        anchors.topMargin: widget.sectionSpacing
        anchors.left: parent.left
        anchors.right: parent.right
        node: AudioService.source
        maxPercent: 100
        activeIcon: "mic"
        mutedIcon: "mic_off"
    }

    StyledText {
        id: inputLabel

        anchors.top: inputVolume.bottom
        anchors.left: parent.left
        text: "Input"
        font.pixelSize: Theme.fontSizeSmall
        color: Theme.surfaceVariantText
    }

    GameBarDeviceList {
        anchors.top: inputLabel.bottom
        anchors.topMargin: Theme.spacingXS
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        isSink: false
    }
}