import {View} from "react-native-ui-lib";
import React, {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 onLayout = (event: LayoutChangeEvent) => {
        const {height, width} = event.nativeEvent.layout;
        setCalendarHeight(height);
        setCalendarWidth(width);
    };

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

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