cally/components/pages/calendar/DetailedCalendar.tsx

import React, {useCallback, useEffect, useMemo, useRef} from "react";
import {useAuthContext} from "@/contexts/AuthContext";
import {useAtomValue} from "jotai";
import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import {CalendarBody, CalendarContainer, CalendarHeader, CalendarKitHandle} from "@howljs/calendar-kit";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useFormattedEvents} from "@/components/pages/calendar/useFormattedEvents";
import {useCalendarControls} from "@/components/pages/calendar/useCalendarControls";
import {EventCell} from "@/components/pages/calendar/EventCell";
import {isToday} from "date-fns";
import { View } from "react-native-ui-lib";
import { DeviceType } from "expo-device";
import * as Device from "expo-device"
import {useAtomCallback} from 'jotai/utils'

interface EventCalendarProps {
    calendarHeight: number;
    calendarWidth: number;
    mode: "week" | "month" | "day" | "3days";
    onLoad?: () => void;
}

const MemoizedEventCell = React.memo(EventCell);

export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo((
    {
        calendarHeight,
        calendarWidth,
        mode,
        onLoad
    }) => {
    const {profileData} = useAuthContext();
    const selectedDate = useAtomValue(selectedDateAtom);
    const {data: familyMembers} = useGetFamilyMembers();
    const calendarRef = useRef<CalendarKitHandle>(null);
    const {data: events} = useGetEvents();
    const selectedUser = useAtomValue(selectedUserAtom);

    const checkModeAndGoToDate = useAtomCallback(useCallback((get) => {
        const currentMode = get(modeAtom);
        if ((selectedDate && isToday(selectedDate)) || currentMode === "month") {
            calendarRef?.current?.goToDate({date: selectedDate});
        }
    }, [selectedDate]));

    useEffect(() => {
        checkModeAndGoToDate();
    }, [selectedDate, checkModeAndGoToDate]);

    const {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser);
    const {
        handlePressEvent,
        handlePressCell,
        debouncedOnDateChanged
    } = useCalendarControls(events ?? []);

    const numberOfDays = useMemo(() => {
        return mode === 'week' ? 7 : mode === '3days' ? 3 : 1;
    }, [mode]);

    const firstDay = useMemo(() => {
        return profileData?.firstDayOfWeek === "Mondays" ? 1 : 0;
    }, [profileData?.firstDayOfWeek]);

    const headerProps = useMemo(() => ({
        dayBarHeight: 60,
        headerBottomHeight: 20,
    }), []);

    const bodyProps = useMemo(() => ({
        showNowIndicator: true,
        hourFormat: "h:mm a"
    }), []);

    const containerProps = useMemo(() => ({
        hourWidth: 70,
        allowPinchToZoom: true,
        useHaptic: true,
        scrollToNow: true,
        initialDate: selectedDate.toISOString(),
    }), [selectedDate]);

    const getAttendees = useCallback((event: any) => {
        return familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [];
    }, [familyMembers]);

    const renderEvent = useCallback((event: any) => {
        const attendees = getAttendees(event);
        return (
                <MemoizedEventCell
                    event={event}
                    onPress={handlePressEvent}
                    attendees={attendees}
                />
        );
    }, [familyMembers, handlePressEvent, getAttendees]);

    return (
        <CalendarContainer
            ref={calendarRef}
            {...containerProps}
            numberOfDays={numberOfDays}
            calendarWidth={calendarWidth}
            onDateChanged={debouncedOnDateChanged}
            firstDay={firstDay}
            events={formattedEvents ?? []}
            onPressEvent={handlePressEvent}
            onPressBackground={handlePressCell}
            onLoad={onLoad}
        >
            <CalendarHeader {...headerProps} />
            <CalendarBody
                {...bodyProps}
                renderEvent={renderEvent}
            />
        {Device.deviceType === DeviceType.TABLET && <View style={{backgroundColor: 'white', height: '9%', width: '100%'}}/>}
        </CalendarContainer>
    );
});

DetailedCalendar.displayName = 'DetailedCalendar';

export default DetailedCalendar;