import {View} from "react-native-ui-lib";
import React, {useCallback, useRef, useState} from "react";
import {LayoutChangeEvent} from "react-native";
import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
import {CalendarHeader} from "@/components/pages/calendar/CalendarHeader";
import {EventCalendar} from "@/components/pages/calendar/EventCalendar";

export const InnerCalendar = () => {
    const [calendarHeight, setCalendarHeight] = useState(0);
    const [calendarWidth, setCalendarWidth] = useState(0);
    const calendarContainerRef = useRef(null);
    const hasSetInitialSize = useRef(false);

    const onLayout = useCallback((event: LayoutChangeEvent) => {
        if (!hasSetInitialSize.current) {
            const {height, width} = event.nativeEvent.layout;
            setCalendarHeight(height);
            setCalendarWidth(width);
            hasSetInitialSize.current = true;
        }
    }, []);

    return (
        <>
            <View
                style={{flex: 1, backgroundColor: "#fff", borderRadius: 0, marginBottom: 0, overflow: "hidden"}}
                ref={calendarContainerRef}
                onLayout={onLayout}
                paddingB-0
            >
                {calendarHeight > 0 && (
                    <EventCalendar
                        calendarHeight={calendarHeight}
                        calendarWidth={calendarWidth}
                    />
                )}
            </View>
            <CalendarViewSwitch/>

            <AddEventDialog/>
            <ManuallyAddEventModal/>
        </>
    )
}