import { Palette } from "std-widgets.slint";

export component CalendarGrid inherits VerticalLayout {
    in property <int> start: 0;
    in property <int> end: 0;
    property <bool> reversed: end < start;

    spacing: 15px;
    // Day headers (S, M, T, W, T, F, S)
    HorizontalLayout {
        spacing: 20px;
        alignment: center;
        for day in ["S", "M", "T", "W", "T", "F", "S"]: Text {
            text: day;
            font-size: 1.25rem;
            font-weight: 600;
            horizontal-alignment: center;
            width: 45px;
        }
    }
    // Calendar days (1-31)
    VerticalLayout {
        spacing: 20px;
        for week in 6: HorizontalLayout {
            spacing: 20px;
            for day in 7: Rectangle {
                width: 45px;
                height: 45px;

                border-color: (week * 7) + day + 1 == end ? Palette.accent-background : (week * 7) + day + 1 == start ? Palette.border : Palette.background;
                border-width: (week * 7) + day + 1 == start ? 2px : 4px;
                border-radius: 4px;

                Text {
                    text: (week * 7) + day + 1 <= 31 ? (week * 7) + day + 1 : " ";
                    color: (!reversed && ((week * 7) + day + 1 > start && (week * 7) + day + 1 <= end)) || (reversed && ((week * 7) + day + 1 < start && (week * 7) + day + 1 >= end)) ? Palette.accent-background : Palette.foreground;
                    horizontal-alignment: center;
                    font-size: 1.25rem;
                }
            }
        }
    }
}