import React, { createContext, useState, useContext, useEffect, useMemo } from 'react';
import { UserI } from '../types';
import { getUser, getAvatar } from "./getUser";

type AvatarI = Blob | null;

type UserContextProps = {
  userData: UserI | null;
  avatarData: AvatarI;
  loading: boolean;
  error: Error | null;
  setUserData: React.Dispatch<React.SetStateAction<UserI | null>>;
};

type UserProviderProps = {
    children: React.ReactNode;
};

const UserContext = createContext<UserContextProps | undefined>(undefined);

export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
  const [userData, setUserData] = useState<UserI | null>(null);
  const [avatarData, setAvatarData] = useState<AvatarI>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchUserDataAndAvatar = async () => {
      try {
        const data = await getUser();
        const avatar = await getAvatar();
        setUserData(data);
        setAvatarData(avatar);
      } catch (err) {
          if (err instanceof Error) {
              setError(err);
          } else {
              setError(new Error("An unexpected error occurred."));
          }
      } finally {
          setLoading(false);
      }
    };

    fetchUserDataAndAvatar();
  }, []);

  const contextValue = useMemo(() => ({
    userData,
    avatarData,
    loading,
    error,
    setUserData
  }), [userData, avatarData, loading, error]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
};

export const useUser = (): UserContextProps => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};