cally/components/pages/calendar/CalendarPage.tsx

import React, { useEffect, useRef, useState } from "react";
import { LayoutChangeEvent, StyleSheet } from "react-native";
import { Calendar } from "react-native-big-calendar";
import {
  Picker,
  PickerModes,
  SegmentedControl,
  View,
  Text
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
import { useAuthContext } from "@/contexts/AuthContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
import { CalendarEvent, useCalendarContext } 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,
    },
  });

  const { profileData } = useAuthContext();
  const [isFamilyView, setIsFamilyView] = useState<boolean>(true);
  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 { events, familyEvents } = useCalendarContext();
  const {data: events} = useGetEvents()

  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) => {
    // Get the current day and year
    const currentDay = selectedDate.getDate();
    const currentYear = selectedDate.getFullYear();

    // Find the new month index
    const newMonthIndex = months.indexOf(month);

    // Create a new Date object with the selected month, preserving day and year
    const updatedDate = new Date(currentYear, newMonthIndex, currentDay);

    // Update both selectedDate and activeDate in the Calendar component
    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={{ backgroundColor: isFamilyView ? '#46a80a' : calendarColor }}
            onPressEvent={(event) => {
              setEditVisible(true);
              setEventForEdit(event);
            }}
            height={calendarHeight}
            activeDate={selectedDate}
            date={selectedDate}
            onPressCell={setSelectedNewEndDate}
          />
        )}
      </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>
  );
}