SAE-BUT2/src/pages/EventDetail/components/EventTask/EventTask.tsx

import styles from "./EventTask.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
import Button from "../../../../components/ui/Button/Button";
import assign from "../../../../utils/tasks/assign";
import unAssign from "../../../../utils/tasks/unAssign";
import { useContext, useEffect, useState } from "react";
import isAssigned from "../../../../utils/tasks/isAssigned";
import Modal from "../../../../components/ui/Modal/Modal";
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn";
import AssignUserBtn from "../AssignUserBtn/AssignUserBtn";

type EventTaskProps = {
    taskId: number;
    index: number;
};

export default function EventTask({ taskId, index }: EventTaskProps) {

    const { update } = useContext(AuthContext) as any;
    const { tasks, eventInfo, updateEventInfo } = useContext(EventDetailContext) as any;
    const task = tasks?.find((t: any) => t.id === taskId);
    const eventId = eventInfo?.id;

    const [assigned, setAssigned] = useState<boolean>(false);
    const [open, setOpen] = useState<boolean>(false);
    const [title, setTitle] = useState<string>("");
    const [message, setMessage] = useState<string>("");

    async function checkAssign() {
        const data = await isAssigned(task.id);
        setAssigned(data?.data.assigned);
    }

    useEffect(() => {
        checkAssign();
    }, []);

    const handleRegisterBtn = async () => {
        const res = await assign(task.id);

        switch (res.status) {
            case 200:
                update();
                await updateEventInfo(eventId);
                setTitle("Inscription réussie");
                setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
                setOpen(true);
                setAssigned(true);
                break;

            case 409:
                setTitle("Erreur lors de l'inscription");
                setMessage("Vous êtes déjà inscrit à cette tâche");
                setOpen(true);
                break;

            case 403:
                setTitle("Erreur lors de l'inscription");
                setMessage("Le nombre maximum d'inscription pour cette tâche à été atteint");
                setOpen(true);
                break;
        }
    };

    const handleUnassign = async () => {
        const res = await unAssign(task.id);

        switch (res.status) {
            case 200:
                update();
                await updateEventInfo(eventId);
                setTitle("Désinscription réussie");
                setMessage(`Vous n'êtes plus inscrit à la tâche ${task.name}`);
                setOpen(true);
                setAssigned(false);
                break;

            case 409:
                setTitle("Erreur lors de la désinscription");
                setMessage(`Vous n'êtes pas inscrit à cette tâche`);
                setOpen(true);
                break;
        }
    };

    return (
        <div style={{ "--i": index } as any} key={index} className={`${styles.content} glassBorder`}>
            <div className={styles.task}>
                <div>
          <span>
            <strong>{task.name}</strong>
          </span>
                    <p className={styles.taskDate}>
                        {formatDateLetter(task.start)} - {formatDateLetter(task.end)}
                    </p>
                    <p>{task.description}</p>
                    <div className={styles.participants}>
                        <div className={styles.participantsHeader}>
                            <span className={styles.participantsLabel}>Participants</span>
                            <span className={`${styles.participantsBadge} ${
                                task.users_count >= task.max_participants
                                    ? styles.badgeFull
                                    : task.users_count / task.max_participants >= 0.75
                                    ? styles.badgeAlmost
                                    : styles.badgeOpen
                            }`}>
                                {task.users_count} / {task.max_participants}
                            </span>
                        </div>
                        <div className={styles.progressBar}>
                            <div
                                className={`${styles.progressFill} ${
                                    task.users_count >= task.max_participants
                                        ? styles.fillFull
                                        : task.users_count / task.max_participants >= 0.75
                                        ? styles.fillAlmost
                                        : styles.fillOpen
                                }`}
                                style={{ width: `${Math.min((task.users_count / task.max_participants) * 100, 100)}%` }}
                            />
                        </div>
                    </div>
                </div>

                <div className={styles.manageTaskBtn}>
                    {assigned ? (
                        <Button variant={"danger"} onClick={() => handleUnassign()}>
                            Se désinscrire
                        </Button>
                    ) : (
                        <Button onClick={() => handleRegisterBtn()}>
                            S’inscrire
                        </Button>
                    )}

                    <DeleteTaskBtn
                        eventId={eventId}
                        taskId={task.id}
                        taskName={task.name}
                    />

                    <AssignUserBtn taskId={task.id} eventId={eventId} />
                </div>
            </div>

            <Modal open={open} onClose={() => setOpen(false)} title={title}>
                <p className={styles.modalContent}>{message}</p>
            </Modal>
        </div>
    );
}