import React, {
    createContext,
    PropsWithChildren,
    useEffect,
    useState
} from "react";
import ReactDOM from "react-dom";
import {getMyEmployeeOverview, getPersonnelSingle} from "../../../../API/hr_support";
import useRole from "../../../../hooks/useRole";
import { UserOverview } from "../../../../models/HrSupport/PersonalFolder";
import DuaLoader from "../../../UI/Loader/DuaLoader/DuaLoader";

interface EmployeeContextInterface {
    employee: any,
    user_id: string,
    dua_code: string
}

const EmployeeContext = createContext({} as EmployeeContextInterface);

export const EmployeeContextProvider: React.FC<PropsWithChildren<{ user_id: string, dua_code: any}>> = (props) => {

    const [employee, setEmployee] = useState<UserOverview>()
    const [fetching, setFetching] = useState(true)
const role=useRole()

    useEffect(() => {
        (async () => {
            const res = await getPersonnelSingle(role,props.user_id);
            setEmployee(res.data);
            setFetching(false);
        })();
    }, []);
    if (fetching) return ReactDOM.createPortal(
        <div className="dua-loader-portal">
            <DuaLoader/>
        </div>,
        document.body
    ); // children and provider not rendered yet


    return (
        <EmployeeContext.Provider value={{
            user_id: props.user_id,
            dua_code: props.dua_code,
            employee: employee
        }}>
            {props.children}
        </EmployeeContext.Provider>
    );
};

export default EmployeeContext;