cally/components/pages/calendar/EditEventDialog.tsx

import {Button, ButtonSize, DateTimePicker, Dialog, Switch, Text, TextField, View} from "react-native-ui-lib";
import React from "react";
import {AntDesign, Feather, Ionicons} from "@expo/vector-icons";
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
import {StyleSheet} from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import {useUpdateEvent} from "@/hooks/firebase/useUpdateEvent";
import {editVisibleAtom, eventForEditAtom} from "@/components/pages/calendar/atoms";
import {useAtom} from "jotai";


const EditEventDialog = () => {
    const [isVisible, setIsVisible] = useAtom(editVisibleAtom)
    const [event, setEvent] = useAtom(eventForEditAtom)

    const {mutateAsync: updateEvent} = useUpdateEvent();

    if (!event) return null

    return (
        <Dialog
            bottom={true}
            height={"90%"}
            panDirection={PanningDirectionsEnum.DOWN}
            onDismiss={() => setIsVisible(false)}
            containerStyle={{
                borderRadius: 10,
                backgroundColor: "white",
                width: "100%",
                alignSelf: "stretch",
                padding: 0,
                paddingTop: 4,
                margin: 0,
            }}
            visible={isVisible}
        >
            <View row spread>
                <Button
                    color="#05a8b6"
                    style={styles.topBtn}
                    label="Cancel"
                    onPress={() => {
                        setIsVisible(false);
                    }}
                />
                <View marginT-12>
                    <DropModalIcon
                        onPress={() => {
                            setIsVisible(false);
                        }}
                    />
                </View>
                <Button
                    color="#05a8b6"
                    style={styles.topBtn}
                    label="Save"
                    onPress={() => {
                        try {
                            if (event.id) {
                                updateEvent(event).then(() => setIsVisible(false));
                            }
                        } catch (error) {
                            console.error(error);
                        }
                    }}
                />
            </View>

            <TextField
                placeholder="Edit event title"
                value={event.title}
                onChangeText={(text) => {
                    setEvent((prevEvent) => ({
                        ...prevEvent!,
                        title: text,
                    }));
                }}
                placeholderTextColor="#2d2d30"
                text60R
                marginT-15
                marginL-30
            />
            <View style={styles.divider} marginT-8/>

            <View row spread marginB-10 marginL-30 centerV>
                <View row>
                    <AntDesign name="clockcircleo" size={24} color="#919191"/>
                    <Text text70 marginL-10>
                        All day
                    </Text>
                </View>
                <View right marginR-30>
                    <Switch
                        onColor={"#ea156c"}
                        offColor={"#e1e1e2"}
                        marginL-10
                        value={event.allDay}
                        onValueChange={(value) =>
                            setEvent((prev) => ({...prev!, allDay: value}))
                        }
                    />
                </View>
            </View>
            <View marginL-30 centerV>
                <View row marginB-10 spread>
                    <View row centerV>
                        <Feather name="calendar" size={25} color="#919191"/>
                        <DateTimePicker
                            value={event.start}
                            text70
                            marginL-8
                            maximumDate={event.end}
                            onChange={(date) => {
                                setEvent((prev) => ({...prev!, start: date}));
                            }}
                        />
                    </View>
                    <DateTimePicker
                        text70
                        value={event.start}
                        onChange={(date) => {
                            setEvent((prev) => ({...prev!, start: date}));
                        }}
                        maximumDate={event.end}
                        dateTimeFormatter={(date) => date.toLocaleTimeString("en-us",
                            {
                                hour: "numeric",
                                minute: "numeric"
                            })}
                        mode="time"
                        marginR-30
                    />
                </View>

                {!event.allDay && (
                    <View row marginB-10 spread>
                        <View row centerV>
                            <Feather name="calendar" size={25} color="#919191"/>
                            <DateTimePicker
                                value={event.end}
                                minimumDate={event.start}
                                text70
                                marginL-8
                                onChange={(date) => {
                                    setEvent((prev) => ({...prev!, end: date}));
                                }}
                            />
                        </View>
                        <DateTimePicker
                            text70
                            value={event.end}
                            minimumDate={event.start}
                            onChange={(date) => {
                                setEvent((prev) => ({...prev!, end: date}));
                            }}
                            dateTimeFormatter={(date) => date.toLocaleTimeString("en-us",
                                {
                                    hour: "numeric",
                                    minute: "numeric"
                                })}
                            mode="time"
                            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 text70R marginL-10>
                    Assignees
                </Text>
                <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"
                />
            </View>
            <View row marginH-13 marginT-13>
                <View
                    marginL-30
                    style={{
                        aspectRatio: 1,
                        width: 50,
                        backgroundColor: "red",
                        borderRadius: 50,
                    }}
                />
                <View
                    marginL-30
                    style={{
                        aspectRatio: 1,
                        width: 50,
                        backgroundColor: "red",
                        borderRadius: 50,
                    }}
                />
            </View>
            <View style={styles.divider}/>
            <View marginH-30 marginB-0 row spread centerV>
                <View row centerV>
                    <ClockIcon/>
                    <Text text70 marginL-10>
                        Reminder
                    </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,
                        }}
                        color="#ea156c"
                        label="Set Reminder"
                    />
                </View>
            </View>
            <View style={styles.divider}/>
            <View marginH-30 marginB-0 row spread centerV>
                <View row>
                    <LockIcon/>
                    <Text text70 marginL-10>
                        Mark as Private
                    </Text>
                </View>
                <View>
                    <Switch
                        onColor={"#ea156c"}
                        offColor={"#e1e1e2"}
                        marginL-10
                        value={event.private}
                        onValueChange={(value) =>
                            setEvent((prev) => ({...prev!, private: value}))
                        }
                    />
                </View>
            </View>
            <View style={styles.divider}/>
            <View marginH-30 marginB-0 row spread centerV>
                <View row centerV>
                    <MenuIcon/>
                    <Text text70 marginL-10>
                        Add Details
                    </Text>
                </View>
                <View></View>
            </View>
        </Dialog>
    );
};

export default EditEventDialog;

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,
    },
});