import React from "react";
import {RefreshControl, ScrollView, View} from "react-native";
import CalendarPage from "@/components/pages/calendar/CalendarPage";
import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
import * as Device from "expo-device";
import {DeviceType} from "expo-device";
import {useCalSync} from "@/hooks/useCalSync";
import {colorMap} from "@/constants/colorMap";

export default function Screen() {
    const isTablet = Device.deviceType === DeviceType.TABLET;
    const {resyncAllCalendars, isSyncing} = useCalSync();

    const onRefresh = React.useCallback(async () => {
        try {
            await resyncAllCalendars();
        } catch (error) {
            console.error("Refresh failed:", error);
        }
    }, [resyncAllCalendars]);

    const refreshControl = (
        <RefreshControl
            colors={[
                colorMap.pink,
                colorMap.green,
                colorMap.orange,
                colorMap.purple,
                colorMap.teal,
            ]}
            tintColor={colorMap.pink}
            progressBackgroundColor="white"
            refreshing={isSyncing}
            onRefresh={onRefresh}
            style={isTablet ? {
                position: "absolute",
                left: "50%",
                transform: [{translateX: -20}],
            } : undefined}
        />
    );

    if (isTablet) {
        return (
            <View style={{flex: 1}}>
                <View style={{flex: 1, zIndex: 0}}>
                    <TabletCalendarPage/>
                </View>
                <ScrollView
                    style={{
                        position: "absolute",
                        top: 0,
                        left: "15%",
                        height: "9%",
                        width: "62%",
                        zIndex: 50,
                        backgroundColor: "transparent",
                    }}
                    contentContainerStyle={{
                        flex: 1,
                        justifyContent: "center",
                        paddingRight: 200,
                    }}
                    refreshControl={refreshControl}
                    bounces={true}
                    showsVerticalScrollIndicator={false}
                    pointerEvents={isSyncing ? "auto" : "none"}
                />
            </View>
        );
    }

    return (
        <ScrollView
            style={{flex: 1, height: "100%"}}
            contentContainerStyle={{flex: 1, height: "100%"}}
            refreshControl={refreshControl}
            bounces={true}
            showsVerticalScrollIndicator={false}
        >
            <View style={{flex: 1}}>
                <CalendarPage/>
            </View>
        </ScrollView>
    );
}