DankMaterialShell/Widgets/CenterCommandCenter/CalendarWidget.qml

import QtQuick
import QtQuick.Controls
import "../../Common"

Column {
    id: calendarWidget
    
    property var theme: Theme
    property date displayDate: new Date()
    property date selectedDate: new Date()
    
    spacing: theme.spacingM
    
    // Month navigation header
    Row {
        width: parent.width
        height: 40
        
        Rectangle {
            width: 40
            height: 40
            radius: theme.cornerRadius
            color: prevMonthArea.containsMouse ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12) : "transparent"
            
            Text {
                anchors.centerIn: parent
                text: "chevron_left"
                font.family: theme.iconFont
                font.pixelSize: theme.iconSize
                color: theme.primary
                font.weight: theme.iconFontWeight
            }
            
            MouseArea {
                id: prevMonthArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                
                onClicked: {
                    let newDate = new Date(displayDate)
                    newDate.setMonth(newDate.getMonth() - 1)
                    displayDate = newDate
                }
            }
        }
        
        Text {
            width: parent.width - 80
            height: 40
            text: Qt.formatDate(displayDate, "MMMM yyyy")
            font.pixelSize: theme.fontSizeLarge
            color: theme.surfaceText
            font.weight: Font.Medium
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
        
        Rectangle {
            width: 40
            height: 40
            radius: theme.cornerRadius
            color: nextMonthArea.containsMouse ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12) : "transparent"
            
            Text {
                anchors.centerIn: parent
                text: "chevron_right"
                font.family: theme.iconFont
                font.pixelSize: theme.iconSize
                color: theme.primary
                font.weight: theme.iconFontWeight
            }
            
            MouseArea {
                id: nextMonthArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                
                onClicked: {
                    let newDate = new Date(displayDate)
                    newDate.setMonth(newDate.getMonth() + 1)
                    displayDate = newDate
                }
            }
        }
    }
    
    // Days of week header
    Row {
        width: parent.width
        height: 32
        
        Repeater {
            model: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
            
            Rectangle {
                width: parent.width / 7
                height: 32
                color: "transparent"
                
                Text {
                    anchors.centerIn: parent
                    text: modelData
                    font.pixelSize: theme.fontSizeSmall
                    color: Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.6)
                    font.weight: Font.Medium
                }
            }
        }
    }
    
    // Calendar grid
    Grid {
        width: parent.width
        height: 200 // Fixed height for calendar
        columns: 7
        rows: 6
        
        property date firstDay: {
            let date = new Date(displayDate.getFullYear(), displayDate.getMonth(), 1)
            let dayOfWeek = date.getDay()
            date.setDate(date.getDate() - dayOfWeek)
            return date
        }
        
        Repeater {
            model: 42
            
            Rectangle {
                width: parent.width / 7
                height: parent.height / 6
                
                property date dayDate: {
                    let date = new Date(parent.firstDay)
                    date.setDate(date.getDate() + index)
                    return date
                }
                
                property bool isCurrentMonth: dayDate.getMonth() === displayDate.getMonth()
                property bool isToday: dayDate.toDateString() === new Date().toDateString()
                property bool isSelected: dayDate.toDateString() === selectedDate.toDateString()
                
                color: isSelected ? theme.primary :
                       isToday ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.12) :
                       dayArea.containsMouse ? Qt.rgba(theme.primary.r, theme.primary.g, theme.primary.b, 0.08) : "transparent"
                
                radius: theme.cornerRadiusSmall
                
                Text {
                    anchors.centerIn: parent
                    text: dayDate.getDate()
                    font.pixelSize: theme.fontSizeMedium
                    color: isSelected ? theme.surface :
                           isToday ? theme.primary :
                           isCurrentMonth ? theme.surfaceText : 
                           Qt.rgba(theme.surfaceText.r, theme.surfaceText.g, theme.surfaceText.b, 0.4)
                    font.weight: isToday || isSelected ? Font.Medium : Font.Normal
                }
                
                MouseArea {
                    id: dayArea
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    
                    onClicked: {
                        selectedDate = dayDate
                    }
                }
            }
        }
    }
}