import React, {useRef, useState} from "react";
import {LayoutChangeEvent} from "react-native";
import {Calendar} from "react-native-big-calendar";
import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";

const modeMap = new Map([
    [0, "day"],
    [1, "week"],
    [2, "month"]
]);

const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
];

export default function Screen() {
    const [calendarHeight, setCalendarHeight] = useState(0);
    const [mode, setMode] = useState<"week" | "month" | "day">("week");
    const [selectedDate, setSelectedDate] = useState<Date>(new Date());

    const calendarContainerRef = useRef(null);
    const { data: events} = useGetEvents()

    const onLayout = (event: LayoutChangeEvent) => {
        const {height} = event.nativeEvent.layout;
        setCalendarHeight(height);
    };

    const handleSegmentChange = (index: number) => {
        const selectedMode = modeMap.get(index);
        if (selectedMode) {
            setMode(selectedMode as "week" | "month" | "day");
        }
    };

    const handleMonthChange = (month: string) => {
        const currentYear = selectedDate.getFullYear();
        const currentDay = selectedDate.getDate();
        const newMonthIndex = months.indexOf(month);

        // Update the date with the new month while preserving the day and year
        const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
        setSelectedDate(updatedDate);
    };

    console.log(events)

    return (
        <View style={{flex: 1, height: "100%", padding: 10}}>
            <View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
                <Text>Welcome Dalia</Text>
                <Text>Let's get your week started!</Text>
            </View>

            <View
                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
                ref={calendarContainerRef}
                onLayout={onLayout}
            >
                <View style={{
                    flexDirection: "row",
                    justifyContent: "space-between",
                    alignItems: "center",
                    paddingHorizontal: 10,
                    paddingVertical: 8,
                    borderRadius: 20,
                    borderBottomLeftRadius: 0,
                    borderBottomRightRadius: 0,
                    backgroundColor: "#f9f9f9",
                    marginBottom: 10,
                    shadowColor: "#000",
                    shadowOffset: { width: 0, height: 2 },
                    shadowOpacity: 0.1,
                    shadowRadius: 5,
                    elevation: 3,
                }}>
                    <Picker
                        value={months[selectedDate.getMonth()]} // Get the month from the date
                        placeholder={"Select Month"}
                        mode={PickerModes.SINGLE}
                        onChange={(itemValue) => handleMonthChange(itemValue as string)}
                        trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
                    >
                        {months.map((month) => (
                            <Picker.Item key={month} label={month} value={month}/>
                        ))}
                    </Picker>

                    <View>
                    <SegmentedControl
                        segments={[
                            {label: "D"},
                            {label: "W"},
                            {label: "M"}
                        ]}
                        onChangeIndex={handleSegmentChange}
                        initialIndex={[...modeMap.entries()].find(([_, value]) => value === mode)?.[0] || 1}
                    />
                    </View>
                </View>

                {calendarHeight > 0 && (
                    <Calendar
                        mode={mode}
                        events={events ?? []}
                        height={calendarHeight}
                        activeDate={selectedDate}
                        onSwipeEnd={(newDate) => {
                            console.log(newDate)
                            setSelectedDate(newDate);
                        }}
                    />
                )}
            </View>

            <AddEventDialog/>
        </View>
    );
}
