pragma ComponentBehavior: Bound

import Quickshell
import Quickshell.Wayland
import Quickshell.Services.Notifications
import QtQuick
import QtQuick.Effects

import "../bar"
import "../volume"
import "../notifications"

import "../../services"
import "../../config"

Variants {
    model: Quickshell.screens

    Scope {
        id: scope
        required property ShellScreen modelData

        Exclusions {
            screen: scope.modelData
            bar: bar
        }

        PanelWindow {
            id: win

            screen: scope.modelData
            color: "transparent"

            WlrLayershell.exclusionMode: ExclusionMode.Ignore
            WlrLayershell.keyboardFocus: WlrKeyboardFocus.None

            // Clickthrough mask.
            // Clickable areas of the window are determined by the provided region.
            mask: Region {
                // Start at the bottom left; right of the bar and on top of the border
                x: bar.implicitWidth
                y: Config.border.thickness

                // Width is the window width - the bar's width - the border thickness
                width: win.width - bar.implicitWidth - Config.border.thickness

                // Height is window width - the border thickness x2 —top border and bottom border.
                height: win.height - Config.border.thickness * 2

                // Setting the intersection mode to Xor will invert the mask and make everything in the mask region not clickable and pass through clicks inside it through the window.
                intersection: Intersection.Xor
                Region {
                    item: volume
                    intersection: Intersection.Subtract
                }
            }

            anchors {
                top: true
                bottom: true
                left: true
                right: true
            }

            Item {
                id: background

                anchors.fill: parent
                visible: false

                Border {
                    bar: bar
                }

                Backgrounds {
                    bar: bar
                }
            }

            MultiEffect {
                anchors.fill: source
                source: background
                shadowEnabled: true
                blurMax: 15
            }

            Bar {
                id: bar
                screen: scope.modelData
            }

            VolumeSlider {
                id: volume
                isInRightPanel: hover.isInRightPanel
                screen: scope.modelData
            }

            Hover {
                id: hover
                screen: scope.modelData
                bar: bar
            }
        }
    }
}