import { useAuth } from "@/hooks/useAuth";

import { Skeleton } from "@/components/ui/skeleton"

import useFetchData from "@/hooks/useFetchData";
import { useParams, useNavigate } from 'react-router-dom';
import { useEffect, useRef } from "react";
import useNotification from "@/hooks/useNotification";
import { useState } from "react";
import { format, parseISO} from 'date-fns';

const Profile = () => {

const { notify } = useNotification();
const navigate = useNavigate();
const { user, token } = useAuth();
const { userId } = useParams();
const [userdata, setUserData] = useState([]);
const { fetchData } = useFetchData();
//let requestFailed = useRef(false);

useEffect(() => {
const fetchUser = async () => {
try {
const response = await
fetchData(`/api/user/profile/${userId}/details`, {
method: 'GET',
});

if (response && response.data) {

setUserData(response.data);
} else {
console.error('Error al obtener los datos del curso:',
response);
}
} catch (error) {
console.error('Error al realizar la solicitud:', error);
}
};

fetchUser();
}, [userId]);

const handleEdit = async () => {

//navigate(`/profile/${userId}/edit`);
};
function isOwnProfile() {
return user.id == userId;
}

return (
<div className="flex flex-col items-center justify-center bg-gray-100 py-10
px-4">
<div className="max-w-2xl w-full bg-white rounded-lg shadow-md">
<div className="text-center py-6">
<h1 className="text-3xl font-bold text-gray-800">Perfil</h1>
{isOwnProfile() ? (
<div>
<p className="text-sm text-gray-500">Estás en tu
perfil</p>
</div>
 ) : (
<p className="text-sm text-gray-500">{userdata.name + " " +
userdata.lastname}</p>
)}
</div>
<hr className="border-gray-300" />

<div className="bg-gray-50 py-6 px-8">

<div className="space-y-6">
<ul className="space-y-2 w-full">
<li className="text-gray-700 font-medium text-center">
<strong>Nombre: </strong>
<spam>{userdata.name}</spam>
</li>
<li className="text-gray-700 font-medium text-
center"><strong>Apellido:</strong> {userdata.lastname}</li>
<li className="text-gray-700 font-medium text-center">
<strong className="text-left">DNI: </strong>
<spam>{userdata.dni}</spam>
</li>
<li className="text-gray-700 font-medium text-
center"><strong>Email:</strong> {userdata.email}</li>
<li className="text-gray-700 font-medium text-
center"><strong>Teléfono:</strong> {userdata.phone || "Sin número de
teléfono"}</li>
<li className="text-gray-700 font-medium text-
center"><strong>Celular:</strong> {userdata.cellphone || "Sin número de
celular"}</li>
<li className="text-gray-700 font-medium text-
center"><strong>Fecha de nacimiento:</strong> { userdata.birthDate } </li>
<li className="text-gray-700 font-medium text-
center"><strong>Nacionalidad:</strong> {userdata.nationality}</li>
<li className="text-gray-700 font-medium text-
center"><strong>Género:</strong> {userdata.gender}</li>
<li className="text-gray-700 font-medium text-center">
<strong>Tipo de perfil: </strong>
{userdata.professionalData
? `Profesional ($
{userdata.professionalData.type})`
: userdata.student
? "Estudiante"
: "Comunidad"}
</li> </ul>
</div>
{/*NO LO PIDE EL SRS ASÍ QUE ESTÁ DE MÁS, IGUAL NO FUNCIONA
{
userdata.student && (
<>
<hr className="border-gray-300" />
<h2 className="text-xl font-semibold text-gray-700
text-center mb-4">Información de estudiante</h2>
<div className="space-y-6">
<ul className="space-y-2 w-full">
<li className="text-gray-700 font-medium
text-center"><strong>Legajo:</strong> {userdata.student.legajo}</li>
<li className="text-gray-700 font-medium
text-center"><strong>Cátedra:</strong> {userdata.student.university}</li>
<li className="text-gray-700 font-medium
text-center"><strong>Verificado:</strong> {userdata.student.verified ? "Sí" :
"No"}</li>
</ul>
</div>
</>
)
}
{
userdata.professionalData && (
<>
<hr className="border-gray-300" />
<h2 className="text-xl font-semibold text-gray-700
text-center mb-4">Información profesional</h2>
<div className="space-y-6">
<ul className="space-y-2 w-full">
<li className="text-gray-700 font-medium
text-center"><strong>Matrícula:</strong> {userdata.professionalData.matricula}</li>
<li className="text-gray-700 font-medium
text-center"><strong>Tipo:</strong> {userdata.professionalData.type}</li>
<li className="text-gray-700 font-medium
text-center"><strong>Verificado:</strong> {userdata.professionalData.verified ?
"Sí" : "No"}</li>
</ul>
</div>
</>
)
}*/}
{isOwnProfile() && (
<div className="flex justify-end gap-3 mt-3 py-2">
<button onClick={handleEdit}
className="w-full py-2 px-2 rounded-md text-white
hover:bg-[#6d0d1d] bg-[#8e1826] hover:scale-105 hover:shadow-lg transition-all
font-bold text-lg">
Editar
</button>
</div>
)}
</div>
</div>
</div>
);
};

export default Profile;