import { useEffect, useLayoutEffect, useRef } from "react";
import { User } from "../model/user";
import { devlog } from "../utils/devlog";
import { makeRequest } from "../api/makeRequest";


export function useUserFetcher({ onError, onNewUser, url, userId }: {
    url: string;
    userId: string | null;
    onNewUser: (response: User) => void;
    onError?: (error: any) => void;
}) {
    const onNewUserRef = useRef(onNewUser);
    const onErrorRef = useRef(onError);

    useLayoutEffect(() => {
        onNewUserRef.current = onNewUser;
        onErrorRef.current = onError;
    }, [onError, onNewUser]);

    useEffect(() => {
        if (!userId) return;

        const controller = new AbortController();

        makeRequest<never, User>({
            url,
            contentType: true,
            method: "GET",
            useToken: true,
            withCredentials: false,
            signal: controller.signal,
        }).then(result => {
            devlog("User", result);
            onNewUserRef.current(result);
        }).catch(error => {
            devlog("Error fetching user", error);
            onErrorRef.current?.(error);
        });

        return () => controller.abort();
    }, [url, userId]);
}