Syncing rework

components/pages/calendar/CalendarHeader.tsx

@@ -1,21 +1,34 @@
 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 {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) => {
-        const selectedMode = modeMap.get(index);
+        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");
+                setMode(selectedMode as "day" | "week" | "month" | "3days");
             }, 150);
         }
     };
@@ -31,6 +44,34 @@ export const CalendarHeader = memo(() => {
 
     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={{
@@ -96,7 +137,7 @@ export const CalendarHeader = memo(() => {
 
                 <View>
                     <SegmentedControl
-                        segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
+                        segments={segments}
                         backgroundColor="#ececec"
                         inactiveColor="#919191"
                         activeBackgroundColor="#ea156c"
@@ -105,7 +146,7 @@ export const CalendarHeader = memo(() => {
                         outlineWidth={3}
                         segmentLabelStyle={styles.segmentslblStyle}
                         onChangeIndex={handleSegmentChange}
-                        initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
+                        initialIndex={getInitialIndex()}
                     />
                 </View>
             </View>
@@ -118,4 +159,4 @@ const styles = StyleSheet.create({
         fontSize: 12,
         fontFamily: "Manrope_600SemiBold",
     },
-});
+});