import Quickshell
import Quickshell.Wayland
import QtQuick
import qs.config
import qs.services
import qs.widgets

Variants {
    model: Quickshell.screens

    PanelWindow {
        id: win

        property var modelData: null
        readonly property string connector: win.modelData?.name ?? "Display"
        readonly property int number: Math.max(1,
            Displays.monitors.findIndex(monitor => monitor.name === win.connector) + 1)
        readonly property string description: Displays.monitorNamed(win.connector)?.description ?? "Connected display"

        screen: win.modelData
        visible: Displays.identifying
        implicitWidth: 260
        implicitHeight: 172
        color: "transparent"
        exclusiveZone: 0
        exclusionMode: ExclusionMode.Ignore
        mask: Region {}

        WlrLayershell.namespace: "qs-display-identify"
        WlrLayershell.layer: WlrLayer.Overlay
        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None

        Rectangle {
            anchors.fill: parent
            radius: Theme.popoverRadius
            color: Theme.alpha(Theme.bgPopover, 0.96)
            border.width: 1
            border.color: Theme.alpha(Theme.fg, 0.14)

            PrismEdge {
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                inset: parent.radius
            }

            Column {
                anchors.centerIn: parent
                width: parent.width - 32
                spacing: 4

                Text {
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                    text: String(win.number)
                    color: Theme.fg
                    font.family: Theme.fontFamily
                    font.pixelSize: 68
                    font.weight: Font.DemiBold
                }

                Text {
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                    text: win.connector
                    color: Theme.accentAlt
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeLarge
                    font.weight: Font.DemiBold
                    elide: Text.ElideRight
                }

                Text {
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                    text: win.description
                    color: Theme.fgDim
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    elide: Text.ElideRight
                }
            }
        }
    }
}