import {
    Avatar,
    Colors,
    DateTimePicker,
    LoaderScreen,
    Modal,
    Picker,
    Switch,
    Text,
    TextField,
    View,
} from "react-native-ui-lib";
import {ScrollView, TouchableOpacity} from "react-native-gesture-handler";
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useState} from "react";
import {MaterialIcons} from "@expo/vector-icons";
import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
import {useAuthContext} from "@/contexts/AuthContext";
import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
import {EventData} from "@/hooks/firebase/types/eventData";
import {addHours} from "date-fns";

const daysOfWeek = [
    {label: "Monday", value: "monday"},
    {label: "Tuesday", value: "tuesday"},
    {label: "Wednesday", value: "wednesday"},
    {label: "Thursday", value: "thursday"},
    {label: "Friday", value: "friday"},
    {label: "Saturday", value: "saturday"},
    {label: "Sunday", value: "sunday"},
];

export const ManuallyAddEventModal = ({
                                          show,
                                          close,
                                          initialDate
                                      }: {
    show: boolean;
    close: () => void;
    initialDate?: Date
}) => {
    const {user} = useAuthContext();
    const insets = useSafeAreaInsets();

    const [title, setTitle] = useState<string>("");

    const [isAllDay, setIsAllDay] = useState(false);
    const [startTime, setStartTime] = useState(() => {
        const date = initialDate ?? new Date();
        date.setSeconds(0, 0);
        return date;
    });
    const [endTime, setEndTime] = useState(() => {
        const date = initialDate ? addHours(initialDate, 1) : new Date();
        date.setSeconds(0, 0);
        return date;
    });

    const [startDate, setStartDate] = useState(initialDate ?? new Date());
    const [endDate, setEndDate] = useState(initialDate ?? new Date());

    const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);

    const {mutateAsync: createEvent, isLoading, isError} = useCreateEvent();

    const formatDateTime = (date: Date) => {
        return date.toLocaleDateString("en-US", {
            weekday: "long",
            month: "short",
            day: "numeric",
        });
    };

    const combineDateAndTime = (date: Date, time: Date): Date => {
        const combined = new Date(date);
        combined.setHours(time.getHours());
        combined.setMinutes(time.getMinutes());
        combined.setSeconds(0);
        combined.setMilliseconds(0);
        return combined;
    };

    const handleSave = async () => {
        let finalStartDate: Date;
        let finalEndDate: Date;

        if (isAllDay) {
            finalStartDate = new Date(startDate);
            finalStartDate.setHours(0, 0, 0, 0);

            finalEndDate = new Date(startDate);
            finalEndDate.setHours(23, 59, 59, 999);
        } else {
            finalStartDate = combineDateAndTime(startDate, startTime);
            finalEndDate = combineDateAndTime(endDate, endTime);
        }

        const eventData: Partial<EventData> = {
            title,
            startDate: finalStartDate,
            endDate: finalEndDate,
            repeatDays: repeatInterval.map((x) => x.toString()),
            allDay: isAllDay,
        };

        await createEvent(eventData);

        close();
    };

    const getRepeatLabel = () => {
        const selectedDays = repeatInterval;
        const allDays = [
            "sunday",
            "monday",
            "tuesday",
            "wednesday",
            "thursday",
            "friday",
            "saturday",
        ];
        const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"];

        const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day));

        const isEveryDay = allDays.every((day) => selectedDays.includes(day));

        if (isEveryDay) {
            return "Every day";
        } else if (
            isEveryWorkDay &&
            !selectedDays.includes("saturday") &&
            !selectedDays.includes("sunday")
        ) {
            return "Every work day";
        } else {
            return selectedDays
                .map((item) => daysOfWeek.find((day) => day.value === item)?.label)
                .join(", ");
        }
    };

    if (isLoading && !isError) {
        return (
            <Modal
                visible={show}
                animationType="slide"
                onRequestClose={close}
                transparent={false}
            >
                <LoaderScreen message={"Saving event..."} color={Colors.grey40}/>
            </Modal>
        );
    }

    return (
        <Modal
            visible={show}
            animationType="slide"
            onRequestClose={close}
            transparent={false}
        >
            <View
                style={{
                    flex: 1,
                    backgroundColor: "#fff",
                    paddingTop: insets.top, // Safe area inset for top
                    paddingBottom: insets.bottom, // Safe area inset for bottom
                    paddingLeft: insets.left, // Safe area inset for left
                    paddingRight: insets.right, // Safe area inset for right
                }}
            >
                <View
                    style={{
                        flexDirection: "row",
                        justifyContent: "space-between",
                        padding: 16,
                    }}
                >
                    <TouchableOpacity onPress={close}>
                        <Text style={{color: "#007bff"}}>Cancel</Text>
                    </TouchableOpacity>
                    <Text style={{fontWeight: "bold", fontSize: 16}}>Add event</Text>
                    <TouchableOpacity onPress={handleSave}>
                        <Text style={{color: "#007bff"}}>Save</Text>
                    </TouchableOpacity>
                </View>

                <ScrollView
                    contentContainerStyle={{paddingHorizontal: 16, paddingTop: 10}}
                >
                    <View style={{marginVertical: 10}}>
                        <TextField
                            placeholder={"Title"}
                            floatingPlaceholder
                            value={title}
                            onChangeText={setTitle}
                            showCharCounter
                            maxLength={200}
                            fieldStyle={{
                                borderBottomWidth: 1,
                                borderBottomColor: "black",
                                borderStyle: "solid",
                            }}
                        />
                    </View>

                    <View
                        style={{
                            flexDirection: "row",
                            justifyContent: "space-between",
                            alignItems: "center",
                            marginBottom: 20,
                        }}
                    >
                        <View style={{flexDirection: "row", alignItems: "center"}}>
                            <MaterialIcons name="schedule" size={24} color="gray"/>
                            <Text style={{marginLeft: 10}}>All-day</Text>
                        </View>
                        <Switch
                            value={isAllDay}
                            onValueChange={(value) => setIsAllDay(value)}
                        />
                    </View>

                    <View
                        style={{
                            flexDirection: "row",
                            justifyContent: "space-between",
                            alignItems: "center",
                            marginBottom: 20,
                        }}
                    >
                        <DateTimePicker
                            mode="date"
                            dateFormatter={formatDateTime}
                            value={startDate}
                            onChange={setStartDate}
                            display="default"
                        />
                        {!isAllDay && (
                            <DateTimePicker
                                mode="time"
                                value={startTime}
                                onChange={setStartTime}
                                display="spinner"
                            />
                        )}
                    </View>

                    {!isAllDay && (
                        <View
                            style={{
                                flexDirection: "row",
                                justifyContent: "space-between",
                                alignItems: "center",
                                marginBottom: 20,
                            }}
                        >
                            <DateTimePicker
                                mode="date"
                                dateFormatter={formatDateTime}
                                value={endDate}
                                onChange={setEndDate}
                                display="default"
                            />
                            <DateTimePicker
                                mode="time"
                                value={endTime}
                                onChange={setEndTime}
                                minuteInterval={1}
                                display="spinner"
                            />
                        </View>
                    )}

                    <View
                        style={{
                            flexDirection: "row",
                            alignItems: "center",
                            marginBottom: 20,
                        }}
                    >
                        <MaterialIcons name="repeat" size={24} color="gray"/>
                        <Picker
                            value={repeatInterval}
                            //@ts-ignore
                            onChange={(items: PickerMultiValue) => setRepeatInterval(items)}
                            placeholder="Doest not repeat"
                            style={{marginLeft: 10, flex: 1}}
                            mode={Picker.modes.MULTI}
                            getLabel={getRepeatLabel}
                        >
                            {daysOfWeek.map((option) => (
                                <Picker.Item
                                    key={option.value}
                                    label={option.label}
                                    value={option.value}
                                />
                            ))}
                        </Picker>
                    </View>

                    <View
                        style={{
                            flexDirection: "row",
                            alignItems: "center",
                            marginBottom: 20,
                        }}
                    >
                        <MaterialIcons name="person-add" size={24} color="gray"/>
                        <TouchableOpacity
                            style={{
                                marginLeft: 10,
                                flexDirection: "row",
                                alignItems: "center",
                                flex: 1,
                            }}
                        >
                            <Avatar size={40} backgroundColor={Colors.yellow10}/>
                            <View style={{marginLeft: 10}}>
                                <Text>Other</Text>
                                <Text style={{color: "gray"}}>{user?.email}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
        </Modal>
    );
};