// components
import "bink" as Bink
import "launcher" as Launcher
// singletons
import "title"
import "tags"
import "rice"
import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Controls

ShellRoot {
    // rhs main
    Variants {
        model: Quickshell.screens.filter(s => s.name == "DP-2")
        delegate: PanelWindow {
            id: bink
            property var modelData

            anchors {
                top: true
                right: true
            }

            implicitHeight: 22
            implicitWidth: 115
            color: "transparent"

            Rectangle {
                anchors.fill: parent
                bottomLeftRadius: 10
                color: Colours.c.black
            }

            Rectangle {
                anchors {
                    leftMargin: 8
                    bottomMargin: 3
                    fill: parent
                }
                color: Colours.c.black
                bottomLeftRadius: 10
                Bink.Bink {
                    format: "ahms"
                    colours: ["transparent", Colours.c.yellow_b]
                }
            }

            exclusionMode: ExclusionMode.Ignore
            WlrLayershell.layer: WlrLayer.Top
            screen: modelData
        }
    }

    // centre main
    Variants {
        model: Quickshell.screens.filter(s => s.name == "DP-2")
        delegate: PanelWindow {
            id: windowTitle
            property var modelData
            anchors {
                top: true
            }

            TextMetrics {
                id: textInfo
                font {
                    family: "Inria Sans"
                    pointSize: 12
                }
                elideWidth: 550
                elide: Qt.ElideMiddle
                text: Title.currentWindow
            }

            implicitHeight: textInfo.height + 6
            implicitWidth: (textInfo.width > textInfo.elideWidth ? textInfo.elideWidth : textInfo.width) + 24
            Behavior on implicitWidth {
                NumberAnimation {
                    duration: 150
                    easing.type: Easing.InOutQuad
                }
            }
            color: "transparent"

            Rectangle {
                anchors {
                    fill: parent
                }
                color: Colours.c.black
                bottomLeftRadius: 10
                bottomRightRadius: 10

                Rectangle {
                    anchors {
                        fill: parent
                        leftMargin: 12
                        rightMargin: 12
                        topMargin: 4
                    }
                    color: "transparent"
                    Text {
                        font {
                            family: "Inria Sans"
                            pointSize: 12
                        }
                        color: Colours.c.yellow_b
                        text: textInfo.elidedText
                    }
                }
            }

            exclusionMode: ExclusionMode.Ignore
            WlrLayershell.layer: WlrLayer.Top
            screen: modelData
        }
    }

    // bottom middle main
    Variants {
        model: Quickshell.screens.filter(s => s.name == "DP-2")
        delegate: PanelWindow {
            id: tags
            property var modelData
            anchors {
                bottom: true
            }

            implicitHeight: 22
            implicitWidth: Tags.keys.length * 13 + 24
            // implicitWidth:.width + 24
            color: "transparent"

            Rectangle {
                anchors {
                    fill: parent
                }
                color: Colours.c.black
                topLeftRadius: 10
                topRightRadius: 10

                Rectangle {
                    anchors {
                        fill: parent
                        leftMargin: 12
                        rightMargin: 12
                        topMargin: 3
                    }
                    Row {
                        anchors {
                            fill: parent
                        }
                        spacing: 1
                        Repeater {
                            model: Tags.keys
                            delegate: Column {
                                id: baseCol
                                required property var modelData
                                spacing: 3
                                Rectangle {
                                    property var tag: Tags.tags[baseCol.modelData]
                                    width: 12
                                    height: width
                                    radius: width
                                    color: tag.urgent ? Colours.c.red_b : (tag.enabled) ? Colours.c.yellow_b : Colours.c.black
                                    Behavior on color {
                                        ColorAnimation {
                                            duration: 300
                                        }
                                    }
                                    border {
                                        width: 1
                                        color: tag.urgent ? Colours.c.red_b : Colours.c.yellow_b 
                                        Behavior on color {
                                            ColorAnimation {
                                                duration: 300
                                            }
                                        }
                                    }
                                }
                                Rectangle {
                                    property var tag: Tags.tags[baseCol.modelData]
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    width: 1
                                    height: 1
                                    color: tag.urgent ? Colours.c.red_b : (tag.occupied) ? Colours.c.yellow_b : Colours.c.black
                                    Behavior on color {
                                        ColorAnimation {
                                            duration: 300
                                        }
                                    }
                                }
                            }
                        }
                    }
                    color: "transparent"
                } // inner container

            }// outer visible rect

            exclusionMode: ExclusionMode.Ignore
            WlrLayershell.layer: WlrLayer.Top
            screen: modelData
        }//invisible rect
    }

    // pops up on current monitor
    Launcher.Launcher {
        width: 190
    }
}