import Quickshell.Services.Pipewire
import QtQuick

import qs.config
import qs.modules.quicksettings
import qs.services
import qs.widgets

Rectangle {
    id: root

    required property var application

    readonly property real volume: AudioDevices.applicationVolume(root.application)
    readonly property bool muted: AudioDevices.applicationMuted(root.application)

    width: parent ? parent.width : 620
    implicitHeight: 78
    radius: Theme.cardRadius
    color: Theme.alpha(Theme.fg, 0.025)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.07)

    PwObjectTracker {
        objects: root.application?.nodes ?? []
    }

    ThemedIcon {
        id: applicationIcon
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.top: parent.top
        anchors.topMargin: 11
        size: 20
        icon: root.application?.icon ?? "audio-x-generic-symbolic"
        iconFallback: "audio-x-generic-symbolic"
        tint: Theme.fg
    }

    Column {
        anchors.left: applicationIcon.right
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 12
        anchors.verticalCenter: applicationIcon.verticalCenter
        spacing: 1

        Text {
            width: parent.width
            text: root.application?.label ?? "Unknown application"
            color: Theme.fg
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.Medium
            elide: Text.ElideRight
        }

        Text {
            width: parent.width
            visible: (root.application?.nodes?.length ?? 0) > 1
            text: `${root.application?.nodes?.length ?? 0} audio streams`
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
        }
    }

    IconButton {
        id: muteButton
        anchors.left: parent.left
        anchors.leftMargin: 8
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        size: 30
        iconSize: 17
        icon: root.muted || root.volume <= 0.001
            ? "audio-volume-muted-symbolic"
            : "audio-volume-high-symbolic"
        iconFallback: "audio-volume-high-symbolic"
        onClicked: AudioDevices.setApplicationMuted(root.application, !root.muted)
    }

    ValueSlider {
        anchors.left: muteButton.right
        anchors.leftMargin: 7
        anchors.right: volumeText.left
        anchors.rightMargin: 10
        anchors.verticalCenter: muteButton.verticalCenter
        value: root.muted ? 0 : root.volume
        onMoved: value => AudioDevices.setApplicationVolume(root.application, value)
    }

    Text {
        id: volumeText
        anchors.right: parent.right
        anchors.rightMargin: 12
        anchors.verticalCenter: muteButton.verticalCenter
        width: 38
        text: Math.round(root.volume * 100) + "%"
        color: Theme.fgDim
        font.family: Theme.fontMono
        font.features: Theme.tabularFigures
        font.pixelSize: Theme.fontSizeSmall
        horizontalAlignment: Text.AlignRight
    }
}