import {
    Button,
    ButtonSize,
    Colors,
    DateTimePicker,
    LoaderScreen,
    Modal,
    Picker,
    PickerModes,
    Switch,
    Text,
    TextField,
    TextFieldRef,
    TouchableOpacity,
    View,
} from "react-native-ui-lib";
import {ScrollView} from "react-native-gesture-handler";
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useEffect, useRef, useState} from "react";
import {AntDesign, Feather, Ionicons} from "@expo/vector-icons";
import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
import {EventData} from "@/hooks/firebase/types/eventData";
import {addHours} from "date-fns";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {StyleSheet} from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import {useAtom} from "jotai";
import {eventForEditAtom, selectedNewEventDateAtom,} from "@/components/pages/calendar/atoms";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import BinIcon from "@/assets/svgs/BinIcon";
import DeleteEventDialog from "./DeleteEventDialog";
import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";

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 = () => {
    const insets = useSafeAreaInsets();

    const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(
        selectedNewEventDateAtom
    );
    const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
    const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
    const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent()

    const {show, close, initialDate} = {
        show: !!selectedNewEventDate || !!editEvent,
        close: () => {
            setDeleteModalVisible(false);
            setSelectedNewEndDate(undefined);
            setEditEvent(undefined);
        },
        initialDate: selectedNewEventDate || editEvent?.start,
    };

    const detailsRef = useRef<TextFieldRef>(null);

    const [title, setTitle] = useState<string>(editEvent?.title || "");
    const [details, setDetails] = useState<string>(editEvent?.notes || "");
    const [isAllDay, setIsAllDay] = useState(editEvent?.allDay || false);
    const [isPrivate, setIsPrivate] = useState<boolean>(
        editEvent?.private || false
    );
    const [startTime, setStartTime] = useState(() => {
        const date = initialDate ?? new Date();
        date.setSeconds(0, 0);
        return date;
    });
    const [endTime, setEndTime] = useState(() => {
        if (editEvent?.end) {
            const date = new Date(editEvent.end);
            date.setSeconds(0, 0);
            return date;
        }
        const date =
            editEvent?.end ?? initialDate
                ? addHours(editEvent?.end ?? initialDate!, 1)
                : addHours(new Date(), 1);
        date.setSeconds(0, 0);
        return date;
    });
    const [startDate, setStartDate] = useState(initialDate ?? new Date());
    const [endDate, setEndDate] = useState(
        editEvent?.end ?? initialDate ?? new Date()
    );
    const [selectedAttendees, setSelectedAttendees] = useState<string[]>(
        editEvent?.participants ?? []
    );
    const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);

    const {mutateAsync: createEvent, isLoading: isAdding, isError} = useCreateEvent();
    const {data: members} = useGetFamilyMembers(true);

    const isLoading = isDeleting || isAdding

    useEffect(() => {
        setTitle(editEvent?.title || "");
        setDetails(editEvent?.notes || "");
        setIsAllDay(editEvent?.allDay || false);
        setIsPrivate(editEvent?.private || false);
        setStartTime(() => {
            const date = initialDate ?? new Date();
            date.setSeconds(0, 0);
            return date;
        });
        setEndTime(() => {
            if (editEvent?.end) {
                const date = new Date(editEvent.end);
                date.setSeconds(0, 0);
                return date;
            }
            const date =
                editEvent?.end ?? initialDate
                    ? addHours(editEvent?.end ?? initialDate!, 1)
                    : addHours(new Date(), 1);
            date.setSeconds(0, 0);
            return date;
        });
        setStartDate(initialDate ?? new Date());
        setEndDate(editEvent?.end ?? initialDate ?? new Date());
        setSelectedAttendees(editEvent?.participants ?? []);
        setRepeatInterval([]);
    }, [editEvent, selectedNewEventDate]);

    if (!show) return null;

    const formatDateTime = (date?: Date | string) => {
        if (!date) return undefined;
        return new Date(date).toLocaleDateString("en-US", {
            weekday: "long",
            month: "short",
            day: "numeric",
        });
    };

    const showDeleteEventModal = () => {
        setDeleteModalVisible(true);
    };

    const handleDeleteEvent = async () => {
        await deleteEvent({eventId: `${editEvent?.id}`})
        close()
    };

    const hideDeleteEventModal = () => {
        setDeleteModalVisible(false);
    };

    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.setHours(0, 0, 0, 0));
            finalEndDate = new Date(startDate.setHours(0, 0, 0, 0));
        } else {
            finalStartDate = combineDateAndTime(startDate, startTime);
            finalEndDate = combineDateAndTime(endDate, endTime);
        }

        const eventData: Partial<EventData> = {
            title: title,
            startDate: finalStartDate,
            endDate: finalEndDate,
            allDay: isAllDay,
            attendees: selectedAttendees,
            notes: details,
        };

        if (editEvent?.id) eventData.id = editEvent?.id;

        await createEvent(eventData);
        setEditEvent(undefined);

        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={isDeleting ? "Deleting event..." : "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
                }}
            >
                {/*{editEvent ? (*/}
                {/*  <>*/}
                {/*    <View center paddingT-8>*/}
                {/*      <TouchableOpacity onPress={close}>*/}
                {/*        <DropModalIcon />*/}
                {/*      </TouchableOpacity>*/}
                {/*    </View>*/}
                {/*    <View row spread paddingH-10 paddingB-15>*/}
                {/*      <Button*/}
                {/*        color="#05a8b6"*/}
                {/*        style={styles.topBtn}*/}
                {/*        iconSource={() => <CloseXIcon />}*/}
                {/*        onPress={close}*/}
                {/*      />*/}
                {/*      <View row>*/}
                {/*        <Button*/}
                {/*          style={styles.topBtn}*/}
                {/*          marginR-10*/}
                {/*          iconSource={() => <PenIcon />}*/}
                {/*          onPress={handleSave}*/}
                {/*        />*/}
                {/*        <Button*/}
                {/*          style={styles.topBtn}*/}
                {/*          marginL-5*/}
                {/*          iconSource={() => <BinIcon />}*/}
                {/*          onPress={() => {*/}
                {/*            showDeleteEventModal();*/}
                {/*          }}*/}
                {/*        />*/}
                {/*      </View>*/}
                {/*    </View>*/}
                {/*  </>*/}
                {/*) : (*/}
                <View
                    style={{
                        flexDirection: "row",
                        justifyContent: "space-between",
                        padding: 16,
                    }}
                >
                    <TouchableOpacity onPress={close}>
                        <Text
                            style={{
                                color: "#05a8b6",
                                fontFamily: "PlusJakartaSans_400Regular",
                                fontSize: 16,
                            }}
                            text70
                        >
                            Cancel
                        </Text>
                    </TouchableOpacity>
                    <View row center>
                        <DropModalIcon onPress={close}/>
                    </View>
                    <View flexS row gap-10>
                        <TouchableOpacity onPress={handleSave}>
                            <Text
                                style={{
                                    color: "#05a8b6",
                                    fontFamily: "PlusJakartaSans_400Regular",
                                    fontSize: 16,
                                }}
                                text70
                            >
                                Save
                            </Text>
                        </TouchableOpacity>
                        {editEvent && (
                            <Button
                                style={styles.topBtn}
                                marginL-5
                                iconSource={() => <BinIcon/>}
                                onPress={showDeleteEventModal}
                            />
                        )}
                    </View>

                </View>
                {/*)}*/}
                <ScrollView style={{minHeight: "85%"}}>
                    <TextField
                        placeholder="Add event title"
                        value={title}
                        autoFocus
                        onChangeText={(text) => {
                            setTitle(text);
                        }}
                        placeholderTextColor="#2d2d30"
                        style={{fontFamily: "Manrope_500Medium", fontSize: 22}}
                        paddingT-15
                        paddingL-30
                        returnKeyType="next"
                    />
                    <View style={styles.divider} marginT-8/>
                    <View marginL-30 centerV>
                        <View row spread marginB-10 centerV>
                            <View row>
                                <AntDesign name="clockcircleo" size={24} color="#919191"/>
                                <Text
                                    style={{
                                        fontFamily: "PlusJakartaSans_500Medium",
                                        fontSize: 16,
                                    }}
                                    marginL-10
                                >
                                    All day
                                </Text>
                            </View>
                            <View right marginR-30>
                                <Switch
                                    onColor={"#ea156c"}
                                    offColor={"#e1e1e2"}
                                    marginL-10
                                    value={isAllDay}
                                    onValueChange={(value) => setIsAllDay(value)}
                                />
                            </View>
                        </View>
                        <View row marginB-10 spread>
                            <View row centerV>
                                <Feather name="calendar" size={25} color="#919191"/>
                                <DateTimePicker
                                    value={startDate}
                                    onChange={(date) => {
                                        setStartDate(date);
                                    }}
                                    //maximumDate={endDate}
                                    style={{
                                        fontFamily: "PlusJakartaSans_500Medium",
                                        fontSize: 16,
                                    }}
                                    marginL-8
                                />
                            </View>
                            <DateTimePicker
                                value={startTime}
                                onChange={(time) => {
                                    if (time <= endTime) {
                                        setStartTime(time);
                                    }
                                }}
                                minuteInterval={5}
                                dateTimeFormatter={(date, mode) =>
                                    date.toLocaleTimeString("en-us", {
                                        hour: "numeric",
                                        minute: "numeric",
                                    })
                                }
                                mode="time"
                                style={{
                                    fontFamily: "PlusJakartaSans_500Medium",
                                    fontSize: 16,
                                }}
                                marginR-30
                            />
                        </View>

                        {!isAllDay && (
                            <View row marginB-10 spread>
                                <View row centerV>
                                    <Feather name="calendar" size={25} color="#919191"/>
                                    <DateTimePicker
                                        value={endDate}
                                        minimumDate={startDate}
                                        text70
                                        marginL-8
                                        onChange={(date) => {
                                            setEndDate(date);
                                        }}
                                        style={{
                                            fontFamily: "PlusJakartaSans_500Medium",
                                            fontSize: 16,
                                        }}
                                    />
                                </View>
                                <DateTimePicker
                                    value={endTime}
                                    onChange={(time) => {
                                        if (time >= endTime) {
                                            setEndTime(time);
                                        }
                                    }}
                                    minimumDate={startTime}
                                    minuteInterval={5}
                                    dateTimeFormatter={(date, mode) =>
                                        date.toLocaleTimeString("en-us", {
                                            hour: "numeric",
                                            minute: "numeric",
                                        })
                                    }
                                    mode="time"
                                    style={{
                                        fontFamily: "PlusJakartaSans_500Medium",
                                        fontSize: 16,
                                    }}
                                    marginR-30
                                />
                            </View>
                        )}
                    </View>

                    <View style={styles.divider}/>

                    <View marginH-30 marginB-10 row centerV>
                        <Ionicons name="person-circle-outline" size={28} color="#919191"/>
                        <Text
                            style={{fontFamily: "Manrope_600SemiBold", fontSize: 18}}
                            marginL-10
                        >
                            Attendees
                        </Text>
                        <View flex-1/>
                        <Picker
                            value={selectedAttendees}
                            onChange={(value) =>
                                setSelectedAttendees((value as string[]) ?? [])
                            }
                            style={{marginLeft: "auto"}}
                            mode={PickerModes.MULTI}
                            renderInput={() => (
                                <Button
                                    size={ButtonSize.small}
                                    paddingH-8
                                    iconSource={() => (
                                        <Ionicons name="add-outline" size={20} color="#ea156c"/>
                                    )}
                                    style={{
                                        marginLeft: "auto",
                                        borderRadius: 8,
                                        backgroundColor: "#ffe8f1",
                                        borderColor: "#ea156c",
                                        borderWidth: 1,
                                    }}
                                    color="#ea156c"
                                    label="Add"
                                    labelStyle={{
                                        fontFamily: "Manrope_600SemiBold",
                                        fontSize: 14,
                                    }}
                                />
                            )}
                        >
                            {members?.map((member) => (
                                <Picker.Item
                                    key={member?.uid}
                                    value={member?.uid!}
                                    label={member?.firstName + " " + member?.lastName}
                                />
                            ))}
                        </Picker>
                    </View>

                    <View marginL-35>
                        <AssigneesDisplay
                            setSelectedAttendees={setSelectedAttendees}
                            selectedAttendees={selectedAttendees}
                        />
                    </View>

                    <View style={styles.divider}/>
                    <View marginH-30 marginB-0 row spread centerV>
                        <View row centerV>
                            <ClockIcon/>
                            <Text
                                style={{
                                    fontFamily: "Manrope_600SemiBold",
                                    fontSize: 18,
                                }}
                                marginL-10
                            >
                                Reminders
                            </Text>
                        </View>
                        <View>
                            <Button
                                size={ButtonSize.small}
                                paddingH-8
                                iconSource={() => (
                                    <Ionicons name="add-outline" size={20} color="#ea156c"/>
                                )}
                                style={{
                                    marginLeft: "auto",
                                    borderRadius: 8,
                                    backgroundColor: "#ffe8f1",
                                    borderColor: "#ea156c",
                                    borderWidth: 1,
                                }}
                                labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
                                color="#ea156c"
                                label="Set Reminder"
                            />
                        </View>
                    </View>
                    <View style={styles.divider}/>
                    <View marginH-30 marginB-0 row spread centerV>
                        <View row centerH>
                            <LockIcon/>
                            <Text
                                style={{
                                    fontFamily: "PlusJakartaSans_500Medium",
                                    fontSize: 16,
                                }}
                                marginL-10
                            >
                                Mark as Private
                            </Text>
                        </View>
                        <View>
                            <Switch
                                onColor={"#ea156c"}
                                offColor={"#e1e1e2"}
                                marginL-10
                                value={isPrivate}
                                onValueChange={(value) => setIsPrivate(value)}
                            />
                        </View>
                    </View>
                    <View style={styles.divider}/>
                    <View marginH-30 marginB-0 spread centerV flex-1>
                        <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>
                            <View row centerV>
                                <MenuIcon/>
                                <Text
                                    style={{
                                        fontFamily: "PlusJakartaSans_500Medium",
                                        fontSize: 16,
                                    }}
                                    marginL-10
                                >
                                    Add Details
                                </Text>
                            </View>
                        </TouchableOpacity>

                        <TextField
                            value={details}
                            onChangeText={setDetails}
                            ref={detailsRef}
                            maxLength={2000}
                            multiline
                            numberOfLines={10}
                            marginT-10
                            style={{flex: 1, minHeight: 180}}
                        />
                    </View>
                </ScrollView>
                <Button
                    disabled
                    marginH-30
                    marginB-15
                    label="Create event from image"
                    text70
                    style={{height: 47}}
                    labelStyle={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 15}}
                    backgroundColor="#05a8b6"
                    iconSource={() => (
                        <View marginR-5>
                            <CameraIcon color="white"/>
                        </View>
                    )}
                />
            </View>
            {editEvent && (
                <DeleteEventDialog
                    visible={deleteModalVisible}
                    title={editEvent?.title}
                    onDismiss={hideDeleteEventModal}
                    onConfirm={handleDeleteEvent}
                />
            )}
        </Modal>
    );
};

const styles = StyleSheet.create({
    divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15},
    gradient: {
        height: "25%",
        position: "absolute",
        bottom: 0,
        width: "100%",
    },
    buttonContainer: {
        position: "absolute",
        bottom: 25,
        width: "100%",
    },
    button: {
        backgroundColor: "rgb(253, 23, 117)",
        paddingVertical: 20,
    },
    topBtn: {
        backgroundColor: "white",
        color: "#05a8b6",
    },
    rotateSwitch: {
        marginLeft: 35,
        marginBottom: 10,
        marginTop: 25,
    },
});