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 {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 * as Device from "expo-device";
import {Mode} from "react-native-big-calendar";
import { FontAwesome5 } from '@expo/vector-icons';

export const CalendarHeader = memo(() => {
    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
    const [mode, setMode] = useAtom(modeAtom);
    const isTablet = Device.deviceType === Device.DeviceType.TABLET;

    const segments = isTablet
        ? [{label: "D"}, {label: "W"}, {label: "M"}]
        : [{label: "D"}, {label: "3D"}, {label: "M"}];

    const handleSegmentChange = (index: number) => {
        let selectedMode: Mode;
        if (isTablet) {
            selectedMode = ["day", "week", "month"][index] as Mode;
        } else {
            selectedMode = ["day", "3days", "month"][index] as Mode;
        }

        if (selectedMode) {
            setTimeout(() => {
                setMode(selectedMode as "day" | "week" | "month" | "3days");
            }, 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());

    const getInitialIndex = () => {
        if (isTablet) {
            switch (mode) {
                case "day": return 0;
                case "week": return 1;
                case "month": return 2;
                default: return 1;
            }
        } else {
            switch (mode) {
                case "day": return 0;
                case "3days": return 1;
                case "month": return 2;
                default: return 1;
            }
        }
    };

    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>
                <Button
                    size={"xSmall"}
                    marginR-1
                    avoidInnerPadding
                    style={styles.todayButton}
                    onPress={() => setSelectedDate(new Date())}
                >
                    <MaterialIcons name="calendar-today" size={30} color="#5f6368" />
                    <Text style={styles.todayDate}>{format(new Date(), "d")}</Text>
                </Button>
                <View>
                    <SegmentedControl
                        segments={segments}
                        backgroundColor="#ececec"
                        inactiveColor="#919191"
                        activeBackgroundColor="#ea156c"
                        activeColor="white"
                        outlineColor="white"
                        outlineWidth={3}
                        segmentLabelStyle={styles.segmentslblStyle}
                        onChangeIndex={handleSegmentChange}
                        initialIndex={getInitialIndex()}
                    />
                </View>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    segmentslblStyle: {
        fontSize: 12,
        fontFamily: "Manrope_600SemiBold",
    },
    todayButton: {
        backgroundColor: "transparent",
        borderWidth: 0,
        height: 30,
        width: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    todayDate: {
        position: 'absolute',
        fontSize: 12,
        fontFamily: "Manrope_600SemiBold",
        color: "#5f6368",
        top: '30%',
    },
});