import React, {useState} from "react";
import {MaterialIcons} from "@expo/vector-icons";
import {Button, Card, Dialog, PanningProvider, Text, View} from "react-native-ui-lib";
import {TouchableOpacity} from "react-native";
import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";

export const AddEventDialog = () => {
    const [show, setShow] = useState(false);
    const [showManualInputModal, setShowManualInputModal] = useState(false);

    const handleOpenManualInputModal = () => {
        setShow(false);
        setTimeout(() => {
            setShowManualInputModal(true);
        }, 500);
    };

    return (
        <>
            <Button
                style={{
                    position: "absolute",
                    bottom: 20,
                    right: 20,
                    height: 60,
                    width: 60,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                enableShadow
                iconSource={() => <MaterialIcons name="add" size={30}/>}
                onPress={() => setShow(true)}
            />

            <Dialog
                visible={show}
                onDismiss={() => setShow(false)}
                panDirection={PanningProvider.Directions.DOWN}
                center
            >
                <Card style={{padding: 20, justifyContent: 'center', alignItems: "center"}}>
                    <Text text60>Create a new event</Text>

                    <View style={{marginTop: 20, alignItems: 'center'}}>
                        <Button
                            style={{
                                marginBottom: 10,
                                backgroundColor: "#007bff",
                            }}
                            onPress={handleOpenManualInputModal}
                        >
                            <Text style={{color: "white"}}>Create New</Text>
                        </Button>

                        <Button
                            style={{
                                marginBottom: 10,
                                backgroundColor: "#007bff",
                                opacity: 0.5
                            }}
                            disabled
                        >
                            <Text style={{color: "white"}}>Event</Text>
                        </Button>

                        <Button
                            style={{
                                marginBottom: 10,
                                backgroundColor: "#007bff",
                                opacity: 0.5
                            }}
                            disabled
                        >
                            <Text style={{color: "white"}}>To Do</Text>
                        </Button>

                        <Button
                            style={{
                                marginBottom: 10,
                                backgroundColor: "#007bff",
                                opacity: 0.5
                            }}
                            disabled
                        >
                            <Text style={{color: "white"}}>Upload Image</Text>
                        </Button>
                    </View>

                    <TouchableOpacity onPress={() => setShow(false)}>
                        <Text style={{marginTop: 20, color: "#007bff"}}>Go back</Text>
                    </TouchableOpacity>
                </Card>
            </Dialog>

            <ManuallyAddEventModal show={showManualInputModal} close={() => setShowManualInputModal(false)}/>
        </>
    )
}