import { useState, useEffect } from "react";
import styles from "./VolunteersPage.module.css";
import VolunteerCard from "./VolunteerCard.jsx";
import getAllUser from "../../utils/users/getAllUsers.js";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import filter from "../../utils/filter.js";
import getUserById from "../../utils/users/getUserById.js";

function VolunteerPage() {
    const [filters, setFilters] = useState({
        alphabetical: "asc",
        yearOrder: "desc",
    });
    const [users, setUsers] = useState([]);

    useEffect(() => {
        (async () => {
            const result = await getAllUser();

            if (result.status !== 200 || !Array.isArray(result.data)) {
                console.error("Erreur lors du chargement des utilisateurs", result);
                return;
            }

            const usersData = await Promise.all(
                result.data.map(async (id) => {
                    const res = await getUserById(id);

                    if (res.status === 200) {
                        return res.data;
                    }
                    console.warn(`Utilisateur ${id} non récupéré`, res.status);
                    return null;
                })
            );

            setUsers(usersData.filter(Boolean));
        })();
    }, []);

    return (
        <div className={styles.container}>
            <ToolBar setFilters={setFilters} filters={filters} showCreate={false} />
            <div className={styles.usersList}>
                {filter(users, filters, "user").map((user, index) => (
                    <VolunteerCard key={user.id ?? index} user={user} />
                ))}
            </div>
        </div>
    );
}

export default VolunteerPage;