cally/components/pages/calendar/CalendarHeader.tsx

import React, {memo} from 'react';
import {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";


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

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