import styles from "./VolunteerProfilePage.module.css"
import { useParams } from "react-router";
import { useEffect, useState } from "react";
import getUserById from "../../utils/users/getUserById.js";
import formatDate from "../../utils/date/formatDate.js";
import Task from "../../components/Task/Task.jsx";

export default function VolunteerProfilePage() {

    const params = useParams();
    const id = params.id;

    const [user, setUser] = useState({});

    useEffect(() => {
        (async () => {
            const data = await getUserById(id);
            setUser(data);
        }) ()
    }, []);


    return <div className={styles.container}>
        <div className={`${styles.profileboard} glassCard`}>
            <div className={styles.contentWrapper}>
                <div className={styles.profilePictureContainer}>
                    <img
                        src="/react.svg"
                        alt="Photo de profil"
                        className={styles.profilePicture}
                    />
                </div>
                <div className={styles.description}>
                    <div className={styles.headerProfile}>
                        <h2> {user.name} {user.lastname} </h2>
                    </div>
                    <div className={styles.topDescription}>
                        <div className={styles.infoBlock}>
                            <p><strong>Role :</strong> {user.role}</p>
                            <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
                        </div>
                        <div className={styles.infoBlock}>
                            <p><strong>Mail :</strong> {user.email} </p>
                            <p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
                        </div>
                    </div>

                    <h2>Tâches :</h2>
                    {user.tasks && user.tasks.length > 0 ? (
                        user.tasks.map((task, index) => (
                            <Task key={index} task={task} />
                        ))
                    ) : (
                        <p>Aucune tâche pour le moment.</p>
                    )}

                </div>
            </div>
        </div>
    </div>
}