import qs.config
import qs.custom
import qs.modules.bar
import QtQuick
import Quickshell
import Quickshell.Wayland

Variants {
    model: Quickshell.screens

    Scope {
        id: scope
        required property ShellScreen modelData

        Exclusion {
            screen: scope.modelData
        }

        CustomWindow {
            id: window
            name: "ui"
            screen: scope.modelData

            anchors.top: true
            anchors.left: true
            anchors.bottom: true
            anchors.right: true

            // UI State

            UIState {
                id: uiState
                window: window
                screen: scope.modelData
            }

            // Exclusion

            exclusionMode: ExclusionMode.Ignore
            mask: uiState.uiState.blockScreen ? exclusionBlock : exclusion
            WlrLayershell.keyboardFocus: uiState.uiState.blockScreen ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None

            Region {
                id: exclusionBlock
                intersection: Intersection.Xor
            }

            Region {
                id: exclusion
                x: Config.border.thickness
                y: Config.bar.height
                width: window.width - 2 * Config.border.thickness
                height: window.height - Config.bar.height - Config.border.thickness
                intersection: Intersection.Xor

                regions: regions.instances
            }

            Variants {
                id: regions

                model: panels.children

                Region {
                    required property Item modelData

                    x: modelData.x + Config.border.thickness
                    y: modelData.y + Config.bar.height
                    width: modelData.width
                    height: modelData.height
                    intersection: Intersection.Subtract
                }
            }

            // Visual Content

            CustomRect {
                anchors.fill: parent
                color: Config.colors.overlay
                opacity: uiState.uiState.blockScreen ? 0.5 : 0
                visible: opacity > 0

                Behavior on opacity {
                    Anim {}
                }
            }

            GlowEffect {
                source: border
                blurMax: 25
                blurMultiplier: 0
                glowColor: Config.colors.highlight
            }

            Interactions {
                uiState: uiState.uiState
                bar: bar
                panels: panels
                screen: scope.modelData

                Panels {
                    id: panels

                    uiState: uiState.uiState
                    screen: scope.modelData
                    bar: bar
                }
            }

            Border {
                id: border
            }

            Bar {
                id: bar

                uiState: uiState.uiState
                screen: scope.modelData
                popouts: panels.popouts
            }
        }
    }
}