import QtQuick
import "../services" as S

Item {
    id: root

    required property real screenHeight

    readonly property real _fontSize: Math.max(48, screenHeight * 0.28)

    opacity: 0
    property real _slideX: -80

    NumberAnimation on opacity {
        to: 1
        duration: 400
        easing.type: Easing.OutCubic
    }
    NumberAnimation on _slideX {
        to: 0
        duration: 500
        easing.type: Easing.OutCubic
    }

    transform: Translate {
        x: root._slideX
    }

    Column {
        anchors.centerIn: parent
        spacing: 8
        rotation: -90
        transformOrigin: Item.Center

        Row {
            id: _clockRow

            property string _hours: ""
            property string _minutes: ""

            function _update() {
                const now = new Date();
                _hours = Qt.formatTime(now, "HH");
                _minutes = Qt.formatTime(now, "mm");
            }

            Component.onCompleted: _update()

            Timer {
                interval: 1000
                running: true
                repeat: true
                onTriggered: _clockRow._update()
            }

            Text {
                text: _clockRow._hours
                color: S.Theme.base0C
                font.pixelSize: root._fontSize
                font.family: S.Theme.fontFamily
                font.bold: true
            }
            Text {
                text: ":"
                color: S.Theme.base0E
                font.pixelSize: root._fontSize
                font.family: S.Theme.fontFamily
                font.bold: true
            }
            Text {
                text: _clockRow._minutes
                color: S.Theme.base09
                font.pixelSize: root._fontSize
                font.family: S.Theme.fontFamily
                font.bold: true
            }
        }

        Text {
            text: Qt.formatDate(new Date(), "dddd, d MMMM")
            color: S.Theme.base04
            font.pixelSize: S.Theme.fontSize + 2
            font.family: S.Theme.fontFamily

            Timer {
                interval: 60000
                running: true
                repeat: true
                onTriggered: parent.text = Qt.formatDate(new Date(), "dddd, d MMMM")
            }
        }
    }

    implicitWidth: _clockRow.height
}