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 ids = await getAllUser();
            const usersData = await Promise.all(ids.map(id => getUserById(id)));
            setUsers(usersData);
        })()
    }, [])

  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={index} user={user} />
            ))}
        </div>
    </div>
  );
}

export default VolunteerPage;