cally/components/pages/calendar/CalendarPage.tsx

import React, {useRef, useState} from "react";
import {LayoutChangeEvent, StyleSheet} from "react-native";
import {Calendar} from "react-native-big-calendar";
import {Picker, PickerModes, SegmentedControl, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
import {CalendarEvent} from "@/contexts/CalendarContext";
import {useSettingsContext} from "@/contexts/SettingsContext";
import EditEventDialog from "./EditEventDialog";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";

const modeMap = new Map([
    [0, "day"],
    [1, "week"],
    [2, "month"],
]);

const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
];

export default function CalendarPage() {
    const {calendarColor} = useSettingsContext();
    const [editVisible, setEditVisible] = useState<boolean>(false);
    const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();

    const styles = StyleSheet.create({
        segmentslblStyle: {
            fontSize: 14,
        },
        calHeader: {
            borderWidth: 0,
        },
        dayModeHeader: {
            alignSelf: 'flex-start',
            justifyContent: 'space-between',
            alignContent: 'center',
            width: 38,
            right: 42,
        }
    });

    const [isFamilyView, setIsFamilyView] = useState<boolean>(false);
    const [calendarHeight, setCalendarHeight] = useState(0);
    const [mode, setMode] = useState<"week" | "month" | "day">("week");
    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
    const [selectedNewEventDate, setSelectedNewEndDate] = useState<
        Date | undefined
    >(undefined);

    const calendarContainerRef = useRef(null);
    const {data: events} = useGetEvents(isFamilyView)

    const onLayout = (event: LayoutChangeEvent) => {
        const {height} = event.nativeEvent.layout;
        setCalendarHeight(height);
    };

    const handleSegmentChange = (index: number) => {
        const selectedMode = modeMap.get(index);
        if (selectedMode) {
            setMode(selectedMode as "day" | "week" | "month");
        }
    };

    const handleMonthChange = (month: string) => {
        const currentDay = selectedDate.getDate();
        const currentYear = selectedDate.getFullYear();

        const newMonthIndex = months.indexOf(month);

        const updatedDate = new Date(currentYear, newMonthIndex, currentDay);

        setSelectedDate(updatedDate);
    };

    return (
        <View style={{flex: 1, height: "100%", padding: 10}}>
            <HeaderTemplate
                message={"Let's get your week started!"}
                isWelcome={true}
            />

            <View
                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
                ref={calendarContainerRef}
                onLayout={onLayout}
            >
                <View
                    style={{
                        flexDirection: "row",
                        justifyContent: "space-between",
                        alignItems: "center",
                        paddingHorizontal: 10,
                        paddingVertical: 8,
                        borderRadius: 20,
                        borderBottomLeftRadius: 0,
                        borderBottomRightRadius: 0,
                        backgroundColor: "white",
                        marginBottom: 10,
                    }}
                >
                    <Picker
                        value={months[selectedDate.getMonth()]} // Get the month from the date
                        placeholder={"Select Month"}
                        mode={PickerModes.SINGLE}
                        onChange={(itemValue) => handleMonthChange(itemValue as string)}
                        trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
                    >
                        {months.map((month) => (
                            <Picker.Item key={month} label={month} value={month}/>
                        ))}
                    </Picker>

                    <View>
                        <SegmentedControl
                            segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
                            backgroundColor="#ececec"
                            inactiveColor="#919191"
                            activeBackgroundColor="#ea156c"
                            activeColor="white"
                            outlineColor="white"
                            outlineWidth={3}
                            style={{backgroundColor: "green"}}
                            segmentLabelStyle={styles.segmentslblStyle}
                            onChangeIndex={handleSegmentChange}
                            initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
                        />
                    </View>
                </View>

                {calendarHeight > 0 && (
                    <Calendar
                        bodyContainerStyle={styles.calHeader}
                        mode={mode}
                        events={isFamilyView ? events ?? [] : events ?? []}
                        eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
                        onPressEvent={(event) => {
                            setEditVisible(true);
                            setEventForEdit(event);
                        }}
                        height={calendarHeight}
                        activeDate={selectedDate}
                        date={selectedDate}
                        onPressCell={setSelectedNewEndDate}
                        headerContentStyle={mode === 'day' ? styles.dayModeHeader : {}}
                    />
                )}
            </View>
            <CalendarViewSwitch viewSwitch={setIsFamilyView}/>
            <AddEventDialog/>
            {eventForEdit && (
                <EditEventDialog
                    isVisible={editVisible}
                    setIsVisible={() => {
                        setEditVisible(!editVisible);
                    }}
                    event={eventForEdit}
                />
            )}

            <ManuallyAddEventModal
                key={`${selectedNewEventDate}`}
                initialDate={selectedNewEventDate}
                show={!!selectedNewEventDate}
                close={() => setSelectedNewEndDate(undefined)}
            />
        </View>
    );
}