cally/components/pages/calendar/CalendarHeader.tsx

import React, { memo } from "react";
import {
  Button,
  Picker,
  PickerModes,
  SegmentedControl,
  Text,
  View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { modeMap, months } from "./constants";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
import { format, isSameDay } from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
import {useIsMutating} from "react-query";

export const CalendarHeader = memo(() => {
  const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
  const [mode, setMode] = useAtom(modeAtom);
  const { profileData } = useAuthContext();

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

  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);
  };

  const isSelectedDateToday = isSameDay(selectedDate, new Date());

  return (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderRadius: 20,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
        backgroundColor: "white",
        marginBottom: 10,
      }}
    >
      <View row centerV gap-3>
        <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
          {selectedDate.getFullYear()}
        </Text>
        <Picker
          value={months[selectedDate.getMonth()]}
          placeholder={"Select Month"}
          style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
          mode={PickerModes.SINGLE}
          onChange={(itemValue) => handleMonthChange(itemValue as string)}
          trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
          topBarProps={{
            title: selectedDate.getFullYear().toString(),
            titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
          }}
        >
          {months.map((month) => (
            <Picker.Item key={month} label={month} value={month} />
          ))}
        </Picker>
      </View>

      <View row centerV>
        {!isSelectedDateToday && (
          <Button
            size={"xSmall"}
            marginR-0
            avoidInnerPadding
            style={{
              borderRadius: 50,
              backgroundColor: "white",
              borderWidth: 0.7,
              borderColor: "#dadce0",
              height: 30,
              paddingHorizontal: 10,
            }}
            labelStyle={{
              fontSize: 12,
              color: "black",
              fontFamily: "Manrope_500Medium",
            }}
            label={format(new Date(), "dd/MM/yyyy")}
            onPress={() => {
              setSelectedDate(new Date());
            }}
          />
        )}

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

const styles = StyleSheet.create({
  segmentslblStyle: {
    fontSize: 12,
    fontFamily: "Manrope_600SemiBold",
  },
});