pragma ComponentBehavior: Bound

import qs.config
import qs.custom
import qs.services
import qs.util
import QtQuick
import QtQuick.Layouts

Item {
    id: root

    required property var uiState
    required property Brightness.Monitor monitor

    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left

    implicitWidth: layout.implicitWidth + 30
    implicitHeight: layout.implicitHeight + sunset.height + 40

    RowLayout {
        id: layout

        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 15
        spacing: 10

        // Speaker volume
        CustomMouseArea {
            implicitWidth: Config.osd.sliderWidth
            implicitHeight: Config.osd.sliderLength

            function onWheel(event: WheelEvent) {
                if (event.angleDelta.y > 0)
                    Audio.increaseVolume();
                else if (event.angleDelta.y < 0)
                    Audio.decreaseVolume();
            }

            acceptedButtons: Qt.RightButton
            onClicked: Audio.sink.audio.muted = !Audio.muted

            CustomFilledSlider {
                anchors.fill: parent

                color: Audio.muted ? Config.colors.error : Config.colors.volume
                icon: Icons.getVolumeIcon(value, Audio.muted)
                value: Audio.volume
                onMoved: Audio.setVolume(value)

                Behavior on color {
                    CAnim {
                        duration: Config.anim.durations.small
                    }
                }
            }
        }

        // Microphone
        CustomMouseArea {
            implicitWidth: Config.osd.sliderWidth
            implicitHeight: Config.osd.sliderLength

            function onWheel(event: WheelEvent) {
                if (event.angleDelta.y > 0)
                    Audio.incrementSourceVolume();
                else if (event.angleDelta.y < 0)
                    Audio.decrementSourceVolume();
            }

            acceptedButtons: Qt.RightButton
            onClicked: Audio.source.audio.muted = !Audio.sourceMuted

            CustomFilledSlider {
                anchors.fill: parent

                color: Audio.sourceMuted ? Config.colors.error : Config.colors.mic
                icon: Icons.getMicVolumeIcon(value, Audio.sourceMuted)
                value: Audio.sourceVolume
                onMoved: Audio.setSourceVolume(value)

                Behavior on color {
                    CAnim {
                        duration: Config.anim.durations.small
                    }
                }
            }
        }

        // Brightness
        CustomMouseArea {
            implicitWidth: Config.osd.sliderWidth
            implicitHeight: Config.osd.sliderLength

            function onWheel(event: WheelEvent) {
                const monitor = root.monitor;
                if (!monitor)
                    return;
                if (event.angleDelta.y > 0)
                    monitor.setBrightness(monitor.brightness + 0.1);
                else if (event.angleDelta.y < 0)
                    monitor.setBrightness(monitor.brightness - 0.1);
            }

            CustomFilledSlider {
                anchors.fill: parent

                color: Config.colors.brightness
                icon: Icons.getBrightnessIcon(value)
                value: root.monitor?.brightness ?? 0
                onMoved: root.monitor?.setBrightness(value)
            }
        }
    }

    CustomRect {
        id: sunset

        anchors.top: layout.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 10

        width: layout.width
        height: 40

        color: Hyprsunset.active ? Config.colors.brightness : Config.colors.container
        radius: 7

        Behavior on color {
            CAnim { duration: Config.anim.durations.small }
        }

        StateLayer {
            anchors.fill: parent
            radius: parent.radius
            color: Config.colors.secondary

            function onClicked() {
                if (Hyprsunset.active)
                    Hyprsunset.disable();
                else
                    Hyprsunset.enable();
            }
        }

        MaterialIcon {
            anchors.centerIn: parent

            text: "dark_mode"
            font.pointSize: Config.font.size.large
            color: Hyprsunset.active ? Config.colors.primaryDark : Config.colors.secondary
            fill: Hyprsunset.active ? 1 : 0

            Behavior on color {
                CAnim { duration: Config.anim.durations.small }
            }
        }
    }
}