import QtQuick
import QtQuick.Layouts
import Quickshell
import "../../config.js" as Config

Rectangle {
    id: clockBlock

    implicitWidth: timeText.contentWidth + Config.blockPadding
    implicitHeight: Config.blockHeight

    radius: Config.blockRadius

    property bool alternateFormat: false

    gradient: Gradient {
        GradientStop {
            id: stop1
            position: 0.0
            color: Config.accentGreen
        }

        GradientStop {
            id: stop2
            position: 0.33
            color: Config.accentYellow
        }

        GradientStop {
            id: stop3
            position: 0.66
            color: Config.accentOrange
        }

        GradientStop {
            id: stop4
            position: 1.0
            color: Config.accentRed
        }
    }

    SystemClock {
        id: clock
        precision: SystemClock.Seconds
    }

    Text {
        id: timeText

        anchors.centerIn: parent

        text: alternateFormat
            ? Qt.formatDateTime(clock.date, "󱑃  dddd, dd MMMM yyyy")
            : Qt.formatDateTime(clock.date, "  hh:mm AP • ddd, dd/MM")

        color: Config.textDark
        font.family: Config.fontFamily
        font.pixelSize: Config.fontSize
        font.bold: true
    }

    MouseArea {
        anchors.fill: parent

        cursorShape: Qt.PointingHandCursor

        onClicked: {
            alternateFormat = !alternateFormat
        }
    }

    SequentialAnimation {
        running: true
        loops: Animation.Infinite

        ParallelAnimation {
            ColorAnimation {
                target: stop1
                property: "color"
                from: Config.accentGreen
                to: Config.accentRed
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop2
                property: "color"
                from: Config.accentYellow
                to: Config.accentGreen
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop3
                property: "color"
                from: Config.accentOrange
                to: Config.accentYellow
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop4
                property: "color"
                from: Config.accentRed
                to: Config.accentOrange
                duration: Config.gradientAnimationDuration
            }
        }

        ParallelAnimation {
            ColorAnimation {
                target: stop1
                property: "color"
                from: Config.accentRed
                to: Config.accentGreen
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop2
                property: "color"
                from: Config.accentGreen
                to: Config.accentYellow
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop3
                property: "color"
                from: Config.accentYellow
                to: Config.accentOrange
                duration: Config.gradientAnimationDuration
            }

            ColorAnimation {
                target: stop4
                property: "color"
                from: Config.accentOrange
                to: Config.accentRed
                duration: Config.gradientAnimationDuration
            }
        }
    }
}