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 {isSameDay} from "date-fns";

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

    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}}
                    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>
                {!isSelectedDateToday && (
                    <Button size={"small"} marginR-5 label={"Today"} onPress={() => {
                        setSelectedDate(new Date())
                        setMode("day")
                    }}/>
                )}

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