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


interface EmployeeContextInterface {
    employee: UserOverview,
    canEdit: boolean,
    scope: string,
    projectCode?: string; // ✅ new prop

}

const EmployeeContext = createContext({} as EmployeeContextInterface);

export const EmployeeContextProvider: React.FC<PropsWithChildren<{ user: string, canEdit: boolean,projectCode?:string, scope: string }>> = (props) => {

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

    useEffect(() => {
        (async () => {
            let res;

            if (props.scope === 'dua_user') {
                res = await getMyEmployeeOverview(props.user);
            }
            else {
                res = await getCollaborator(Number(props.user));
            }

            if (!res) {
                console.error('No data returned from API');
                return;
            }

            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={{
            employee: employee!,
            canEdit: props.canEdit,
            scope: props.scope,
            projectCode: props.projectCode
        }}>
            {props.children}
        </EmployeeContext.Provider>
    );
};

export default EmployeeContext;