import QtQuick
import Quickshell
import Quickshell.Hyprland
import "../../../config"
import "../states/Clock"

Rectangle {  //workspace
    id: clockRect
    width: ClockState.expanded ? Math.max(dateText.width + timeText.width + Config.spacing_fun(height)*3, bar.height) : Math.max(timeText.width + Config.spacing_fun(height)*2, bar.height)
    height: bar.height
    radius: Config.radius_fun(height)
    color: clockArea.containsMouse ? Colors.tertiaryContainer : Colors.primaryContainer
    border.color: (
        clockArea.containsMouse ? Colors.tertiaryContainer_fg :
        Colors.primaryContainer_fg
    )
    border.width: Config.border_width

    MouseArea {
        id: clockArea
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
        onClicked: {
            ClockState.expanded = !ClockState.expanded
            console.log("[Clock] Date visible: " + ClockState.expanded)
        }
        
        Row {
            anchors.centerIn: parent

            Text {
                id: dateText
                text: ClockState.shortDate
                visible: ClockState.expanded
                color: (
                    clockArea.containsMouse ? Colors.tertiary :
                    Colors.primary
                )
                font.pixelSize: Config.font_size_small(clockRect.height)
                font.family: Config.font
            }

            Text {
                id: timeText
                property string currentTime: ""

                text: ClockState.currentTime
                color: (
                    clockArea.containsMouse ? Colors.tertiary :
                    Colors.primary
                )
                font.pixelSize: Config.font_size_small(clockRect.height)
                font.family: Config.font
            }
        }
    }

    BarPopup {
        id: clockPopup
        anchorItem: clockRect
        anchorHovered: clockArea.containsMouse
        width: Math.max(text1.width, text2.width) + (Config.spacing_fun(clockRect.height) * 3)
        height: text1.height*3+(Config.spacing_fun(clockRect.height) * 5)

        Column {
            width: parent.width
            spacing: Config.spacing_fun(clockRect.height)
            Text {
                id: text1
                text: ClockState.fullDate
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }

            Text {
                id: text2
                text: ClockState.uptime
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
        }
    }
}