import styles from "./createEventBtn.module.css"
import { useState, useContext } from "react";
import Modal from "../ui/modal/modal.jsx";
import Button from "../ui/button/button.jsx";
import TextInput from "../ui/input/input.jsx";
import { EventContext } from "../../contexts/events/EventContext.js";


export default function CreateEventBtn() {

    const { addEvent } = useContext(EventContext);

    const [isOpen, setIsOpen] = useState(false);
    const [name, setName] = useState("");
    const [description, setDescription] = useState("");
    const [start, setStart] = useState("");
    const [end, setEnd] = useState("");

    const handleCreateEvent = async () => {

        if (name !== "" && description !== "" && start !== "" && end !== "") {
            await addEvent(name, description, start, end);
        }
        setIsOpen(false);
    }

    return <>
        <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>

        <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>

            <section className={styles.section}>
                <div className={styles.inputContainer}>
                    <h2>Titre</h2>
                    <TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
                </div>

                <div className={styles.inputContainer}>
                    <h2>Description</h2>
                    <TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
                </div>

                <div className={styles.inputContainer}>
                    <h2>Date</h2>
                    <div className={styles.dateInputContainer}>
                        <div className={styles.dateInput}>
                            <p>Début</p>
                            <TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
                        </div>
                        <div className={styles.dateInput}>
                            <p>Fin</p>
                            <TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
                        </div>
                    </div>
                </div>

                <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
            </section>
        </Modal>
    </>
}