ProfilePage.tsx

import './ProfilePage.css'
import {useParams} from "react-router-dom";
import {NO_TOKEN, PROFESSOR_ROLE, STUDENT_ROLE} from "../utils.ts";
import {useUserContext} from "../contexts/UserContext.tsx";
import {useEffect, useState} from "react";
import {fetchProfessorByFullName, fetchStudentByFullName} from "../services.ts";
import {MajorItem, ResearchLabItem} from "../types.ts";

interface ProfileUser {
    id: number;
    firstName: string;
    lastName: string;
    email: string;
    year?: string;  // STUDENT
    aboutMe?: string;   // STUDENT
    major?: MajorItem; // STUDENT
    subscriptions?: string[];
    college?: string; // PROFESSOR
    isPending?: boolean; // PROFESSOR
    lab?: ResearchLabItem; // PROFESSOR
}

const studentTypeMap: { [key: string]: string } = {
    'undergraduate': 'Undergraduate Student',
    'graduate-masters': "Graduate (Master's) Student",
    'graduate-phd': 'Graduate (PhD) Student'
};

const situationLabelMap: { [key: string]: string } = {
    'seeking-volunteer': 'Seeking Volunteer Opportunities',
    'seeking-credit': 'Seeking Credit Opportunities',
    'seeking-paid': 'Seeking Paid Opportunities',
    'current-volunteer': 'Currently a Volunteer',
    'current-credit': 'Currently Receiving Credit',
    'current-paid': 'Currently Paid',
    'other': 'Other'
};

export default function ProfilePage() {
    const {role, fullName} = useParams();
    const {token} = useUserContext();
    const [profileUser, setProfileUser] = useState<ProfileUser>();

    useEffect(() => {
        const fetchProfileDetails = async () => {
            if (token !== NO_TOKEN) {
                if (fullName) {
                    try {
                        if (role === PROFESSOR_ROLE) {
                            const result = await fetchProfessorByFullName(fullName, token);
                            setProfileUser(result);
                        }
                        if (role === STUDENT_ROLE) {
                            const result = await fetchStudentByFullName(fullName, token);
                            setProfileUser(result);
                        }
                    } catch (error) {
                        console.error("Failed to load user with name: " + fullName, error);
                    }
                }
            }
        }
        fetchProfileDetails();
    }, [fullName, role, token]);

    const displayStudentYear = profileUser?.year ? studentTypeMap[profileUser.year] : undefined;
    const aboutMeArray = profileUser?.aboutMe ? profileUser.aboutMe.split(', ') : [];
    const selectedLabels = aboutMeArray.map(value => situationLabelMap[value]);

    return (
        <div className='profile-page center-content'>
            {profileUser ? (
                <>
                    <div className='profile-header'>
                        <h1><span>{profileUser.firstName}</span> <span>{profileUser.lastName}</span></h1>
                    </div>
                    <div className='profile-section'>
                        <h2>Contact Information</h2>
                        <p><span className="attribute">Email:</span> {profileUser.email}</p>
                    </div>
                    {role === STUDENT_ROLE && (
                        <>
                            <div className='profile-section'>
                                <h2>Academic Information</h2>
                                <p><span className="attribute"></span>{displayStudentYear}</p>
                                <p><span className="attribute">College of </span> {profileUser.major?.college}</p>
                                <p><span className="attribute">Majoring in </span> {profileUser.major?.name}</p>
                            </div>
                            <div className='profile-section'>

                                <h2>Current Situation</h2>
                                <ul>
                                    {selectedLabels.map((label, index) => (
                                        <li key={index}>{label}</li>
                                    ))}
                                </ul>
                            </div>
                        </>
                    )}
                    {role === STUDENT_ROLE && profileUser.subscriptions && (
                        <>
                            <div className='profile-section'>
                                <h2>Subscriptions</h2>
                                <ul>
                                    {profileUser.subscriptions.map((sub, index) => (
                                        <li key={index}>{sub}</li>
                                    ))}
                                </ul>
                            </div>
                        </>
                    )}
                    {role === PROFESSOR_ROLE && (
                        <div className='profile-section'>
                            <h2>Academic Information</h2>
                            <p><span className="attribute"></span>Professor</p>
                            <p><span className="attribute">College of</span> {profileUser.college}</p>
                        </div>
                    )}
                    {(role === PROFESSOR_ROLE && profileUser.lab) && (
                        <div className='profile-section'>
                            <h2>Research Lab Information</h2>
                            <p><span className="attribute">Lab Name:</span> {profileUser.lab?.name}</p>
                            <p><span className="attribute">College:</span> {profileUser.lab?.major.college}</p>
                            <p><span className="attribute">Major:</span> {profileUser.lab?.major.name}</p>
                            <p><span
                                className="attribute">Principle Investigator:</span> {profileUser.lab?.principleInvestigator}
                            </p>
                            <p><span className="attribute">URL:</span> {profileUser.lab?.url}</p>
                            <p><span className="attribute">Description:</span> {profileUser.lab?.description}</p>
                        </div>
                    )}
                </>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}