cally/components/pages/todos/AddChoreDialog.tsx

import {
    Button,
    ButtonSize,
    DateTimePicker,
    Dialog,
    Picker,
    PickerModes,
    Switch,
    Text,
    TextField,
    TextFieldRef,
    View
} from "react-native-ui-lib";
import React, {useEffect, useRef, useState} from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import {repeatOptions, useToDosContext} from "@/contexts/ToDosContext";
import {Ionicons} from "@expo/vector-icons";
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
import {Alert, Dimensions, KeyboardAvoidingView, StyleSheet} from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import RepeatFreq from "./RepeatFreq";
import {useAuthContext} from "@/contexts/AuthContext";
import TodoRepeatIcon from "@/assets/svgs/TodoRepeatIcon";

interface IAddChoreDialog {
    isVisible: boolean;
    setIsVisible: (value: boolean) => void;
    selectedTodo?: IToDo;
    isShoppingTodo?: boolean;
}

const defaultTodo = {
    id: "",
    title: "",
    points: 10,
    date: new Date(),
    rotate: false,
    repeatType: REPEAT_TYPE.NONE,
    assignees: [],
    repeatDays: []
};

const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
    const {user} = useAuthContext()
    const {addToDo, updateToDo} = useToDosContext();
    const [todo, setTodo] = useState<IToDo>(
        addChoreDialogProps.selectedTodo ?? defaultTodo
    );
    const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
        addChoreDialogProps?.selectedTodo?.assignees ?? [user?.uid!]
    );
    const {width} = Dimensions.get("screen");
    const [points, setPoints] = useState<number>(todo.points);

    const titleRef = useRef<TextFieldRef>(null)

    const {data: members} = useGetFamilyMembers();
    let sortedMembers = members?.sort((a, b) => {
        if (a.uid === user?.uid) return -1;
        if (b.uid === user?.uid) return 1;
        return 0;
    })

    const handleClose = () => {
        setTodo(defaultTodo);
        setSelectedAssignees([]);
        addChoreDialogProps.setIsVisible(false);
    };

    const handleChange = (text: string) => {
        const numericValue = parseInt(text, 10);

        if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) {
            setPoints(numericValue);
        } else if (text === "") {
            setPoints(0);
        }
    };

    const handleRepeatDaysChange = (day: string, set: boolean) => {
        if (set) {
            const updatedTodo = {
                ...todo,
                repeatDays: [...todo.repeatDays, day]
            }
            setTodo(updatedTodo);
        } else {
            const array = todo.repeatDays ?? [];
            let index = array.indexOf(day);
            array.splice(index, 1);
            const updatedTodo = {
                ...todo,
                repeatDays: array
            }
            setTodo(updatedTodo);
        }
    }

    useEffect(() => {
        setTimeout(() => {
            titleRef?.current?.focus()
        }, 500)
    }, []);

    const repeatPickerRef = useRef();
    const showRepeatPicker = () => {
        repeatPickerRef.current?.toggleExpandable(true);
    }

    const validateTodo = () => {
        if (!todo?.title) {
            Alert.alert('Alert', 'Title field cannot be empty');
            return false;
        }
        if (!selectedAssignees || selectedAssignees?.length === 0) {
            Alert.alert('Alert', 'Cannot have a todo without any assignees');
            return false;
        }
        if (todo?.repeatType === REPEAT_TYPE.EVERY_WEEK && todo?.repeatDays?.length === 0) {
            Alert.alert('Alert', 'Please select a specific day for the Weekly recurrence');
            return false;
        }

        return true;
    }

    return (
        <Dialog
            bottom={true}
            height={"90%"}
            width={width}
            panDirection={PanningDirectionsEnum.DOWN}
            onDismiss={() => handleClose}
            containerStyle={{
                borderRadius: 10,
                backgroundColor: "white",
                alignSelf: "stretch",
                padding: 0,
                paddingTop: 4,
                margin: 0,
                maxWidth: 600
            }}
            visible={addChoreDialogProps.isVisible}
        >
            <View row spread>
                <Button
                    color="#05a8b6"
                    style={styles.topBtn}
                    label="Cancel"
                    onPress={() => {
                        handleClose();
                    }}
                />
                <View marginT-12>
                    <DropModalIcon
                        onPress={() => {
                            handleClose();
                        }}
                    />
                </View>
                <Button
                    color="#05a8b6"
                    style={styles.topBtn}
                    label="Save"
                    onPress={() => {
                        try {
                            if (addChoreDialogProps.selectedTodo && !addChoreDialogProps.isShoppingTodo) {
                                if (validateTodo()) {
                                    updateToDo({
                                        ...todo,
                                        points: points,
                                        assignees: selectedAssignees,
                                        currentAssignee: selectedAssignees[0],
                                    });
                                } else {
                                    return;
                                }
                            } else {
                                if (validateTodo()) {
                                    addToDo({
                                        ...todo,
                                        done: false,
                                        points: points,
                                        assignees: selectedAssignees,
                                        currentAssignee: selectedAssignees[0],
                                        repeatDays: todo.repeatDays ?? []
                                    });
                                } else {
                                    return;
                                }
                            }
                            handleClose();
                        } catch (error) {
                            console.error(error);
                        }
                    }}
                />
            </View>
            <KeyboardAvoidingView>
                <TextField
                    placeholder="Add a To Do"
                    value={todo?.title}
                    onChangeText={(text) => {
                        setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
                    }}
                    placeholderTextColor="#2d2d30"
                    text60R
                    marginT-15
                    marginL-30
                    ref={titleRef}
                />
                <View style={styles.divider} marginT-8/>
                <View marginL-30 centerV>
                    <View row marginB-10>
                        {todo?.date && (
                            <View row centerV>
                                <CalendarIcon color="#919191" width={24} height={24}/>
                                <DateTimePicker
                                    value={todo.date}
                                    text70
                                    style={{
                                        fontFamily: "PlusJakartaSans_500Medium",
                                        fontSize: 16,
                                    }}
                                    marginL-12
                                    onChange={(date) => {
                                        setTodo((oldValue: IToDo) => ({...oldValue, date: date}));
                                    }}
                                />
                            </View>
                        )}
                    </View>
                    <View row centerV>
                        <TodoRepeatIcon onPress={showRepeatPicker}/>
                        <Picker
                            ref={repeatPickerRef}
                            marginL-12
                            placeholder="Select Repeat Type"
                            value={todo?.repeatType}
                            onChange={(value) => {
                                if (value) {
                                    setTodo((oldValue) => ({
                                        ...oldValue,
                                        repeatType: value.toString(),
                                        repeatDays: []
                                    }));
                                }
                            }}
                            topBarProps={{title: "Repeat"}}
                            style={{
                                marginVertical: 5,
                                fontFamily: "PlusJakartaSans_500Medium",
                                fontSize: 16,
                            }}
                        >
                            {repeatOptions.map((option) => (
                                <Picker.Item
                                    key={option.value}
                                    label={option.label}
                                    value={option.value}
                                />
                            ))}
                        </Picker>
                    </View>
                    {todo.repeatType == REPEAT_TYPE.EVERY_WEEK && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
                                                                    repeatDays={todo.repeatDays ?? []}/>}
                </View>
                <View style={styles.divider}/>

                <View marginH-30 marginB-10 row centerV>
                    <ProfileIcon color="#919191"/>
                    <Text style={styles.sub} marginL-10>
                        Assignees
                    </Text>
                    <View flex-1/>
                    <Picker
                        marginL-8
                        value={selectedAssignees}
                        onChange={(value) => {
                            setSelectedAssignees(value);
                        }}
                        style={{marginVertical: 5}}
                        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="Assign"
                                labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
                            />
                        )}
                    >
                        {sortedMembers?.map((member) => (
                            <Picker.Item
                                key={member.uid}
                                label={member?.firstName + " " + member?.lastName}
                                value={member?.uid!}
                            />
                        ))}
                    </Picker>
                </View>
                <View row marginL-27 marginT-0>
                    <AssigneesDisplay
                        selectedAttendees={selectedAssignees}
                        setSelectedAttendees={setSelectedAssignees}
                    />
                </View>
                {todo.repeatType !== REPEAT_TYPE.NONE && selectedAssignees?.length > 1 &&
                    <View row centerV style={styles.rotateSwitch}>
                        <Text style={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 16}}>
                            Take Turns
                        </Text>
                        <Switch
                            onColor={"#ea156c"}
                            value={todo.rotate}
                            style={{width: 43.06, height: 27.13}}
                            marginL-10
                            onValueChange={(value) =>
                                setTodo((oldValue) => ({...oldValue, rotate: value}))
                            }
                        />
                    </View>
                }
                <View style={styles.divider}/>
                <View marginH-30 marginB-15 row centerV>
                    <Ionicons name="gift-outline" size={25} color="#919191"/>
                    <Text style={styles.sub} marginL-10>
                        Reward Points
                    </Text>
                </View>
                <PointsSlider
                    points={points}
                    setPoints={setPoints}
                    handleChange={handleChange}
                />
            </KeyboardAvoidingView>
        </Dialog>
    );
};

export default AddChoreDialog;

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,
    },
    sub: {
        fontFamily: "Manrope_600SemiBold",
        fontSize: 18,
    },
});