import styles from "../../eventDetail.module.css";
import Button from "../../../../components/ui/button/button.jsx";
import {useContext, useState} from "react";
import TextInput from "../../../../components/ui/input/input.jsx";
import Modal from "../../../../components/ui/modal/modal.jsx";
import createTaskApi from "../../../../utils/tasks/createTask.js";
import {EventDetailContext} from "../../../../contexts/eventDetail/eventDetail.js";

export default function CreateTaskBtn({ id }) {

    const [openTaskModal, setOpenTaskModal] = useState(false);

    const [taskName, setTaskName] = useState("");
    const [taskDescription, setTaskDescription] = useState("");
    const [taskLocation, setTaskLocation] = useState("");
    const [maxParticipants, setMaxParticipants] = useState("");
    const [startTime, setStartTime] = useState("");
    const [endTime, setEndTime] = useState("");

    const { updateEventInfo } = useContext(EventDetailContext)

    const createTask = async () => {
        const success = await createTaskApi({
            eventId: id,
            name: taskName,
            description: taskDescription,
            start: startTime,
            end: endTime,
            location: taskLocation,
            maxParticipants,
        });

        if (success) {
            setOpenTaskModal(false);
            setTaskName("");
            setTaskDescription("");
            setTaskLocation("");
            setMaxParticipants("");
            setStartTime("");
            setEndTime("");

            updateEventInfo(id)
        } else {
            console.log("⚠️ Échec de la création de la task");
        }
    };

    return <>

        <Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>

        <Modal open={openTaskModal} onClose={() => setOpenTaskModal(false)} title={"Créer tâche"}>
            <div className={styles.modalContent}>

                <div>
                    <p>Nom de la tâche</p>
                    <TextInput
                        value={taskName}
                        onChange={(e) => setTaskName(e.target.value)}
                        placeholder="Nom de la tâche"
                    />
                </div>

                <div>
                    <p>Description</p>
                    <TextInput
                        value={taskDescription}
                        onChange={(e) => setTaskDescription(e.target.value)}
                        placeholder="Description de la tâche"
                    />
                </div>

                <div>
                    <p>Lieu</p>
                    <TextInput
                        value={taskLocation}
                        onChange={(e) => setTaskLocation(e.target.value)}
                        placeholder="Lieu"
                    />
                </div>

                <div>
                    <p>Nombre maximum de participants</p>
                    <TextInput
                        type="number"
                        value={maxParticipants}
                        onChange={(e) => setMaxParticipants(e.target.value)}
                        placeholder="Participants max"
                    />
                </div>

                <div>
                    <p>Heure de début</p>
                    <TextInput
                        type="datetime-local"
                        value={startTime}
                        onChange={(e) => setStartTime(e.target.value)}
                    />
                </div>

                <div>
                    <p>Heure de fin</p>
                    <TextInput
                        type="datetime-local"
                        value={endTime}
                        onChange={(e) => setEndTime(e.target.value)}
                    />
                </div>

                <Button variant="default" onClick={createTask}> Créer la tâche </Button>

            </div>
        </Modal>

    </>
}