'use client'
import { mecredURL } from "@/axiosConfig";
import { CollectionsBookmark, Person, Subject } from "@mui/icons-material"
import { useEffect, useState } from 'react';
import { Avatar, Divider } from "@mui/material"
import Link from "next/link"
import mecredApi from "@/axiosConfig";

/**
 * 
 * @param {Object} props
 * @param {Object} item usuário a ser feito o card
 * @returns 
 */
export default function UsersPageCard({ item }) {
    const [achievements, setAchievements] = useState(null);

    const fetchAchievements = async (id) => {
        await mecredApi
            .get(`/unlocked_achievements/user/${id}?limit=1000`)
            .then(({ data }) => {
                setAchievements(data);
            })
            .catch(() => setError(true))
    }

    fetchAchievements(item.id);

    
    function getRandomBg(id) {
        const colors = [
            "bg-turquoise-HC-white",
            "bg-orange-HC-white",
            "bg-darkTurquoise-HC-white",
            "bg-darkOrange-HC-white ",
            "bg-violet-HC-white",
            "bg-pink-HC-white",
            "bg-red-HC-white",
            "bg-darkGray-HC-white",
            "bg-ice-HC-white",
        ]

        return colors[id % colors.length];
    }


    return (
        item &&
        <Link tabIndex="-1" href={`/perfil/${item["id"]}`}>
            <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-ice-HC-dark  outline outline-1 outline-lightGray-HC-white m-4 rounded-lg hover:bg-ice-HC-dark-hover focus:bg-ice-HC-dark-hover">
                <div className="grid justify-items-center h-[200px] pt-2">
                    {item["avatar"] ?
                        <Avatar src={mecredURL + item["avatar"]} sx={{ position: "inherit" }} className=" min-h-[120px] min-w-[120px] m-2" />
                        :
                        <div className={`flex items-center justify-center text-5xl m-2 font-bold text-ice-HC-dark rounded-full h-[120px] w-[120px] ${getRandomBg(item["id"])}`} >{item["name"][0]}</div>

                    }


                    <p className=" font-bold text-darkGray-HC-white-underline text-center">{item["name"]}</p>
                </div>
                <hr className="border-lightGray-HC-white h-1 mx-4 "/>
                <div className="flex items-center flex-col gap-1 py-3 ">
                    <div className="grid grid-cols-2 justify-start gap-1">
                        <div className="flex items-center mb-2">
                            <img className="flex h-[20px] px-1 text-mediumGray-HC-white invertLogo-HC-white" 
                                src="/nivel.svg"
                                alt="Icon nivel" 
                            />
                            <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Nível: {item["level"]}</p>
                        </div>
                        <div className="flex items-center mb-2">
                            <Person fontSize="small" className="text-darkGray-HC-white mt-2" />
                            <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Seguidores: {item["follows_count"]}</p>
                        </div>
                        {/* <div className="flex">
                            <CollectionsBookmark fontSize="small" className="text-darkGray-HC-white-underline" />
                            <p className="text-sm text-darkGray-HC-white-underline inline px-1">Coleções: {item["collections_count"]} </p>
                        </div> */}
                        <div className="flex items-center mb-2">
                            <Subject fontSize="small" className="text-darkGray-HC-white" />
                            <p className="text-sm text-darkGray-HC-white-underline inline px-1">Recursos: {item["learning_objects_count"]}</p>
                        </div>
                        <div className="flex items-center mb-2">
                            <img className="flex h-[20px] px-1 invertLogo-HC-white" 
                                src="/conquistas.svg"
                                alt="Icon conquista" 
                            />
                            <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Conquistas: {achievements?.length}</p>
                        </div>
                    </div>
                </div>
            </div>
        </Link>
    )
}