import QtQuick
import Quickshell
import Quickshell.Wayland
import "." as M

PanelWindow {
    id: root

    required property var screen

    color: "transparent"

    WlrLayershell.layer: WlrLayer.Background
    WlrLayershell.exclusiveZone: -1
    WlrLayershell.namespace: "nova-background-overlay"
    mask: Region {}

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

    SystemClock {
        id: clock
        precision: SystemClock.Seconds
    }

    Column {
        anchors.centerIn: parent
        spacing: 8

        Row {
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
                text: Qt.formatDateTime(clock.date, "HH")
                color: M.Theme.base05
                opacity: 0.7
                font.pixelSize: 72
                font.family: M.Theme.fontFamily
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
            }
            Text {
                id: colon
                text: ":"
                font.pixelSize: 72
                anchors.verticalCenter: parent.verticalCenter
                font.family: M.Theme.fontFamily
                font.bold: true

                property int _colorIdx: 0
                readonly property var _colors: [M.Theme.base08, M.Theme.base09, M.Theme.base0A, M.Theme.base0B, M.Theme.base0C, M.Theme.base0D, M.Theme.base0E, M.Theme.base05]
                color: _colors[_colorIdx % _colors.length]

                SequentialAnimation {
                    loops: Animation.Infinite
                    running: true
                    NumberAnimation {
                        target: colon
                        property: "opacity"
                        to: 0.1
                        duration: 1000
                        easing.type: Easing.InOutSine
                    }
                    ScriptAction {
                        script: colon._colorIdx++
                    }
                    NumberAnimation {
                        target: colon
                        property: "opacity"
                        to: 0.7
                        duration: 1000
                        easing.type: Easing.InOutSine
                    }
                }
            }
            Text {
                text: Qt.formatDateTime(clock.date, "mm")
                color: M.Theme.base05
                opacity: 0.7
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 72
                font.family: M.Theme.fontFamily
                font.bold: true
            }
        }

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: Qt.formatDateTime(clock.date, "dddd, dd MMMM yyyy")
            color: M.Theme.base05
            opacity: 0.5
            font.pixelSize: 18
            font.family: M.Theme.fontFamily
        }
    }
}