import React, {ReactNode, useEffect, useState} from 'react';
import FilesDirectory from "../../PermanentPersonalFolder/FilesDirectory";
import {getPermanentEmployeeOverview} from "../../../../API/hr_support";
import {PermanentEmployeeDetailed} from "../../../../models/HrSupport/PermanentPersonnel";
import {useParams} from "react-router-dom";
import useLoading from "../../../../hooks/useLoading";



const PermanentEmployeeFolderView = () => {

    const [employee, setEmployee] = useState<PermanentEmployeeDetailed>()
    const {user_id} = useParams()
   const [loading, setLoading] =  useLoading(true)

    const fetchUser = async () => {
        const res = await getPermanentEmployeeOverview(user_id)
        setEmployee(res.data)
    }

    useEffect(() => {

        /**
         * !!!!!!!!!!
         * this is set to false in the inner component
         * to have a smoother loading screen
         * !!!!!!!!!!
         */
        setLoading(true,true)
        fetchUser()
// eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <>
            {
                employee && <FilesDirectory employee={employee} scope={'hr_manager'}/>
            }
        </>

    );
}

export default PermanentEmployeeFolderView;