import React from 'react';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
import {Text} from 'react-native-ui-lib';
import {useGetEvents} from '@/hooks/firebase/useGetEvents';
import {useCalSync} from '@/hooks/useCalSync';
import {useSyncEvents} from '@/hooks/useSyncOnScroll';
import {useAtom} from 'jotai';
import {
    modeAtom,
} from './atoms';
import {MonthCalendar} from "@/components/pages/calendar/MonthCalendar";
import {DetailedCalendar} from "@/components/pages/calendar/DetailedCalendar";

interface EventCalendarProps {
    calendarHeight: number;
    calendarWidth: number;
}

export const EventCalendar: React.FC<EventCalendarProps> = React.memo((props) => {
    const {data: events, isLoading} = useGetEvents();
    const [mode] = useAtom(modeAtom);
    const {isSyncing} = useSyncEvents();
    useCalSync();

    if (isLoading || isSyncing) {
        return (
            <View style={styles.loadingContainer}>
                {isSyncing && <Text>Syncing...</Text>}
                <ActivityIndicator size="large" color="#0000ff"/>
            </View>
        );
    }

    return mode === "month"
        ? <MonthCalendar {...props} />
        : <DetailedCalendar {...props} />;
});

const styles = StyleSheet.create({
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        width: '100%',
        height: '100%',
        zIndex: 100,
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
    },
});

export default EventCalendar;