lootakalenteri-frontend/app/components/Calendar.tsx

import { JSX, useEffect, useState } from "react";
import styles from "./Calendar.module.css";
import { getMonthName, daysInMonth } from "../utils/dateUtils";
import { customerState } from "../store";
import { Box } from "../types";
import { useAtom } from "jotai";

const generateFirstWeekPadding = (month: number) => {
    const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
    const padding = Array.from({ length: firstDay === 0 ? 6 : firstDay - 1 }, (_, index) => (
        <div key={index} className={`${styles.firstWeekPaddingCell}`}>
            &nbsp;
        </div>
    ));
    return padding;
}

const generateCalendarCells = (month: number, boxes: Box[]) => {
    const monthDays = daysInMonth[month];

    const calendarCells = Array.from({ length: monthDays }, (_, index) => {
        const day = index + 1;
        const date = new Date(new Date().getFullYear(), month, day);
        const isDeliveryDate = boxes.find(box => {
            const boxDate = new Date(box.delivery_date);
            return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
        });

        if (isDeliveryDate) {
            return (
                <div key={index} className={`${styles.calendarCell} ${styles.deliveryDateCell}`}>
                    {date.toLocaleDateString("fi-FI", {
                        day: "2-digit",
                        month: "2-digit",
                    })}
                </div>
            );
        }

        return (
            <div key={index} className={`${styles.calendarCell}`}>
                {date.toLocaleDateString("fi-FI", {
                    day: "2-digit",
                    month: "2-digit",
                })}
            </div>
        );
    });
    return calendarCells;
}

export default function Calendar() {
    const [customerData, setCustomerData] = useAtom(customerState);
    const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
    const [calendarCells, setCalendarCells] = useState<JSX.Element[]>([]);
    const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);

    useEffect(() => {
        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
        setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
    }, [selectedMonth]);

    return (
        <>
            <h2 className={styles.monthTitle}>
                {getMonthName(selectedMonth)} {new Date().getFullYear()}
            </h2>
            <div className={styles.monthNavigation}>
                <button onClick={() => setSelectedMonth((prev) => (prev - 1 + 12) % 12)} className={styles.monthNavBtn}>
                    &lt; Edellinen kuukausi
                </button>
                <button onClick={() => setSelectedMonth((prev) => (prev + 1) % 12)} className={styles.monthNavBtn}>
                    Seuraava kuukausi &gt;
                </button>
            </div>
            <div className={styles.calendarGrid}>
                <span>Ma</span>
                <span>Ti</span>
                <span>Ke</span>
                <span>To</span>
                <span>Pe</span>
                <span>La</span>
                <span>Su</span>
                {firstWeekPadding}
                {calendarCells}
            </div>
        </>
    );
}