pragma ComponentBehavior: Bound

import Quickshell
import QtQuick
import QtQuick.Controls

ShellRoot {
    id: root

    property color bgColor: "#6a6365"
    property color recColor: "#595254"
    property color fontColor: "#FFFFFF"
    property int fontSize: 14
    property int barWidth: 50
    property int recRadius: 8
    property int recLength: 35
    property int myMargin: 10
    property int edgeMargin: 15

    property bool expanderOpen: false

    SystemClock {
        id: clock
        precision: SystemClock.Minutes
    }

    Variants {
        model: Quickshell.screens

        PanelWindow {
            property var modelData

            screen: modelData
            anchors.top: true
            anchors.left: true
            anchors.bottom: true

            implicitWidth: root.barWidth
            color: root.bgColor

            Rectangle {
                id: logo

                anchors {
                    horizontalCenter: parent.horizontalCenter
                    top: parent.top
                    topMargin: root.edgeMargin
                }

                implicitHeight: root.recLength
                implicitWidth: root.recLength
                color: root.recColor

                bottomLeftRadius: root.recRadius
                bottomRightRadius: root.recRadius
                topLeftRadius: root.recRadius
                topRightRadius: root.recRadius

                Image {
                    anchors.centerIn: parent
                    source: "file://" + Quickshell.shellDir + "/assets/logo.svg"

                    sourceSize.width: 30
                    sourceSize.height: 30
                }
            }

            Rectangle {
                id: workspaces

                anchors {
                    horizontalCenter: parent.horizontalCenter
                    top: logo.bottom
                    topMargin: root.myMargin
                }

                implicitHeight: 200
                implicitWidth: root.recLength
                color: root.recColor

                bottomLeftRadius: root.recRadius
                bottomRightRadius: root.recRadius
                topLeftRadius: root.recRadius
                topRightRadius: root.recRadius

                Text {
                    anchors.centerIn: parent
                    color: root.fontColor
                    font.pixelSize: root.fontSize
                    text: "ws"
                }
            }

            Rectangle {
                id: notifications

                anchors {
                    horizontalCenter: parent.horizontalCenter
                    bottom: time.top
                    bottomMargin: root.myMargin
                }

                implicitHeight: root.recLength
                implicitWidth: root.recLength
                color: root.recColor

                bottomLeftRadius: root.recRadius
                bottomRightRadius: root.recRadius
                topLeftRadius: root.recRadius
                topRightRadius: root.recRadius

                Text {
                    anchors.centerIn: parent
                    color: root.fontColor
                    font.pixelSize: root.fontSize
                    text: "notif"
                }
            }

            Rectangle {
                id: time

                anchors {
                    horizontalCenter: parent.horizontalCenter
                    bottom: power.top
                    bottomMargin: root.myMargin
                }

                implicitHeight: root.recLength
                implicitWidth: root.recLength
                color: root.recColor

                bottomLeftRadius: root.recRadius
                bottomRightRadius: root.recRadius
                topLeftRadius: root.recRadius
                topRightRadius: root.recRadius

                Text {
                    anchors.centerIn: parent
                    color: root.fontColor
                    font.pixelSize: root.fontSize
                    text: Qt.formatDateTime(clock.date, "hh\nmm")
                }
            }

            Button {
                id: power

                anchors {
                    horizontalCenter: parent.horizontalCenter
                    bottom: parent.bottom
                    bottomMargin: root.edgeMargin
                }

                implicitHeight: root.recLength - 4
                implicitWidth: root.recLength - 4

                onClicked: root.expanderOpen = !root.expanderOpen

                Rectangle {
                    anchors.centerIn: parent

                    implicitHeight: root.recLength
                    implicitWidth: root.recLength
                    color: root.recColor

                    bottomLeftRadius: root.recRadius
                    bottomRightRadius: root.recRadius
                    topLeftRadius: root.recRadius
                    topRightRadius: root.recRadius

                    Image {
                        anchors.centerIn: parent
                        source: "file://" + Quickshell.shellDir + "/assets/power.svg"

                        sourceSize.width: 28
                        sourceSize.height: 28
                    }
                }
            }
        }
    }

    PanelWindow {
        visible: root.expanderOpen

        anchors.left: true
        anchors.bottom: true

        implicitWidth: 200
        implicitHeight: 150
        color: "transparent"

        Rectangle {
            anchors.fill: parent
            color: root.recColor

            Text {
                anchors.centerIn: parent
                color: root.fontColor
                text: "Power Menu"
            }
        }
    }
}