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";

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"}]  // Tablet segments
        : [{label: "D"}, {label: "3D"}, {label: "M"}]; // Phone segments

    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) {
            // Tablet index mapping
            switch (mode) {
                case "day":
                    return 0;
                case "week":
                    return 1;
                case "month":
                    return 2;
                default:
                    return 1; // Default to week view for tablets
            }
        } else {
            // Phone index mapping
            switch (mode) {
                case "day":
                    return 0;
                case "3days":
                    return 1;
                case "month":
                    return 2;
                default:
                    return 1; // Default to 3day view for phones
            }
        }
    };

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