import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import Quickshell
import Quickshell.Wayland

Item {
    id: root

    property bool open: false
    property string kind: "volume"
    property real value: 0
    property bool muted: false

    PanelWindow {
        visible: root.open
        color: "transparent"
        anchors {
            top: true
            bottom: true
            left: true
            right: true
        }
        exclusionMode: ExclusionMode.Ignore
        WlrLayershell.layer: WlrLayer.Overlay
        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
        WlrLayershell.namespace: "quickshell-osd"

        Rectangle {
            width: 300
            height: 78
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 110
            radius: 20
            color: "#1e1e2e"
            border.color: "#45475a"
            border.width: 1

            RowLayout {
                anchors.fill: parent
                anchors.margins: 16
                spacing: 12

                Label {
                    text: root.kind === "brightness" ? "Display" : (root.muted ? "Muted" : "Volume")
                    color: "#cdd6f4"
                    font.pixelSize: 14
                    font.bold: true
                }

                Rectangle {
                    Layout.fillWidth: true
                    height: 8
                    radius: 4
                    color: "#313244"

                    Rectangle {
                        width: parent.width * Math.max(0, Math.min(1, root.value))
                        height: parent.height
                        radius: 4
                        color: root.kind === "brightness" ? "#f9e2af" : "#89b4fa"
                    }
                }

                Label {
                    text: Math.round(root.value * 100) + "%"
                    color: "#cdd6f4"
                    font.pixelSize: 15
                    font.bold: true
                }
            }
        }
    }
}