cally/components/pages/calendar/AddEventDialog.tsx

import React, {useState} from "react";
import {MaterialIcons,} from "@expo/vector-icons";
import {Button, Card, Dialog, PanningProvider, Text, View,} from "react-native-ui-lib";
import {StyleSheet, TouchableOpacity} from "react-native";
import AddChoreDialog from "../todos/AddChoreDialog";
import {ToDosContextProvider} from "@/contexts/ToDosContext";
import UploadImageDialog from "./UploadImageDialog";
import CameraIcon from "@/assets/svgs/CameraIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import {useSetAtom} from "jotai";
import {selectedNewEventDateAtom} from "@/components/pages/calendar/atoms";

export const AddEventDialog = () => {
    const [show, setShow] = useState(false);
    const [choreDialogVisible, setChoreDialogVisible] = useState<boolean>(false);
    const [showUploadDialog, setShowUploadDialog] = useState<boolean>(false);
    const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom)

    const handleOpenManualInputModal = () => {
        setShow(false);
        setTimeout(() => {
            setSelectedNewEndDate(new Date());
        }, 500);
    };

    const handleScanImageDialog = () => {
        setShow(false);
        setTimeout(() => {
            setShowUploadDialog(true);
        }, 100);
    };

    return (
        <ToDosContextProvider>
            <>
                <Button
                    style={{
                        position: "absolute",
                        bottom: 20,
                        right: 20,
                        height: 40,
                        borderRadius: 30,
                        backgroundColor: "#fd1775",
                        alignItems: "center",
                        justifyContent: "center",
                    }}
                    color="white"
                    enableShadow
                    onPress={() => setShow(true)}
                >
                    <View row centerV centerH>
                        <MaterialIcons name="add" size={22} color={"white"}/>
                        <Text white style={{fontSize: 16, fontFamily: 'Manrope_600SemiBold'}}>
                            New
                        </Text>
                    </View>
                </Button>

                <Dialog
                    visible={show}
                    onDismiss={() => setShow(false)}
                    panDirection={PanningProvider.Directions.DOWN}
                    center
                >
                    <Card style={styles.dialogCard}>
                        <Text text60 style={styles.modalTitle}>
                            Create a new event
                        </Text>

                        <View
                            style={{marginTop: 20, alignItems: "center", width: "100%"}}
                        >
                            <Button
                                disabled
                                style={{
                                    marginBottom: 10,
                                    // backgroundColor: "#ea156c",
                                    justifyContent: "center",
                                    width: "100%",
                                    paddingVertical: 13,
                                    opacity: 0.5
                                }}
                                label="Scan Image"
                                labelStyle={styles.btnLabel}
                                onPress={handleScanImageDialog}
                                iconSource={() => (
                                    <CameraIcon color="white" style={styles.btnIcon}/>
                                )}
                            />

                            <Button
                                style={{
                                    marginBottom: 10,
                                    backgroundColor: "#e28800",
                                    justifyContent: "center",
                                    width: "100%",
                                    paddingVertical: 13,
                                }}
                                label="Create Event"
                                labelStyle={styles.btnLabel}
                                onPress={handleOpenManualInputModal}
                                iconSource={() => (
                                    <CalendarIcon color={"white"} style={styles.btnIcon}/>
                                )}
                            />

                            <Button
                                disabled
                                style={{
                                    marginBottom: 10,
                                    // backgroundColor: "#05a8b6",
                                    justifyContent: "center",
                                    width: "100%",
                                    paddingVertical: 13,
                                    opacity: 0.5
                                }}
                                label="Add To Do"
                                labelStyle={styles.btnLabel}
                                onPress={() => setChoreDialogVisible(true)}
                                iconSource={() => (
                                    <NavToDosIcon
                                        color={"white"}
                                        width={23}
                                        style={styles.btnIcon}
                                    />
                                )}
                            />
                        </View>

                        <TouchableOpacity onPress={() => setShow(false)}>
                            <Text style={styles.bottomText} text70>
                                Go back to calendar
                            </Text>
                        </TouchableOpacity>
                    </Card>
                </Dialog>
                <AddChoreDialog
                    isVisible={choreDialogVisible}
                    setIsVisible={setChoreDialogVisible}
                />
                <UploadImageDialog
                    show={showUploadDialog}
                    setShow={setShowUploadDialog}
                />
            </>
        </ToDosContextProvider>
    );
};

const styles = StyleSheet.create({
    modalTitle: {
        fontSize: 22,
        fontFamily: "Manrope_600SemiBold",
        marginBottom: 16,
    },
    bottomText: {
        marginTop: 20,
        color: "#999999",
        fontSize: 13.53,
        fontFamily: "Poppins_500Medium",
    },
    dialogCard: {
        paddingHorizontal: 40,
        paddingTop: 35,
        paddingBottom: 20,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 20,
    },
    btnLabel: {
        fontSize: 15,
        fontFamily: "PlusJakartaSans_500Medium",
    },
    btnIcon: {marginRight: 10},
});