import { useContext, useEffect, useState } from "react";
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
import Button from "../../../../components/ui/Button/Button";
import Modal from "../../../../components/ui/Modal/Modal";
import TextInput from "../../../../components/ui/Input/Input";
import styles from "../../EventDetailPage.module.css";
import updateTask from "../../../../utils/tasks/updateTask";

type EditTaskBtnProps = {
    taskId: number;
    eventId: number | string;
};

export default function EditTaskBtn({ taskId, eventId }: EditTaskBtnProps) {
    const { user } = useContext(AuthContext) as any;
    const { tasks, updateEventInfo } = useContext(EventDetailContext) as any;
    const task = tasks?.find((t: any) => t.id === taskId);

    const [open, setOpen] = useState(false);
    const [name, setName] = useState<string>("");
    const [description, setDescription] = useState<string>("");
    const [start, setStart] = useState<string>("");
    const [end, setEnd] = useState<string>("");
    const [location, setLocation] = useState<string>("");
    const [maxParticipants, setMaxParticipants] = useState<string>("");

    useEffect(() => {
        if (open && task) {
            setName(task.name ?? "");
            setDescription(task.description ?? "");
            setStart(task.start ? task.start.slice(0, 16) : "");
            setEnd(task.end ? task.end.slice(0, 16) : "");
            setLocation(task.location ?? "");
            setMaxParticipants(task.max_participants?.toString() ?? "");
        }
    }, [open, task]);

    if (!user?.isAdmin) return null;

    const handleSubmit = async () => {
        await updateTask(taskId, {
            name,
            description,
            start,
            end,
            location,
            max_participants: Number(maxParticipants),
        });
        await updateEventInfo(eventId);
        setOpen(false);
    };

    return (
        <>
            <Button variant={"default"} onClick={() => setOpen(true)}>
                Modifier
            </Button>

            <Modal open={open} onClose={() => setOpen(false)} title={"Modifier la tâche"}>
                <div className={styles.modalContent}>
                    <div>
                        <p>Nom</p>
                        <TextInput
                            value={name}
                            onChange={(e: any) => setName(e.target.value)}
                            placeholder="Nom de la tâche"
                        />
                    </div>

                    <div>
                        <p>Description</p>
                        <TextInput
                            value={description}
                            onChange={(e: any) => setDescription(e.target.value)}
                            placeholder="Description"
                        />
                    </div>

                    <div>
                        <p>Lieu</p>
                        <TextInput
                            value={location}
                            onChange={(e: any) => setLocation(e.target.value)}
                            placeholder="Lieu"
                        />
                    </div>

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

                    <div>
                        <p>Début</p>
                        <TextInput
                            type="datetime-local"
                            value={start}
                            onChange={(e: any) => setStart(e.target.value)}
                        />
                    </div>

                    <div>
                        <p>Fin</p>
                        <TextInput
                            type="datetime-local"
                            value={end}
                            onChange={(e: any) => setEnd(e.target.value)}
                        />
                    </div>

                    <Button variant="default" onClick={handleSubmit}>
                        Confirmer
                    </Button>
                </div>
            </Modal>
        </>
    );
}