import * as React from "react";
import { useEffect, useState } from "react";
import { getUserProfile, updateProfile } from "../../services/userProfile";
import { useAuthProvider } from "../auth-provider";
import { makeProvider } from "../../_lib/provider-maker";

function useProfile() {
  const { isAuth, user } = useAuthProvider();
  const [currentProfile, setcurrentProfile] = useState<any>({});
  useEffect(() => {
    if (isAuth) {
      getUserProfile().then((response) => {
        setcurrentProfile(response);
      });
    }
  }, [isAuth]);

  async function updateProfileImage(imageSelected: any) {
    const userImage = imageSelected.imageUrl.replace(
      "https://www.bowltv.com",
      ""
    );
    const newProfile = { ...currentProfile, icon: userImage };
    updateProfile(newProfile);
    setcurrentProfile({
      ...newProfile,
      icon: "https://www.bowltv.com" + newProfile.icon,
    });
  }
  return { updateProfileImage, currentProfile };
}

export const {
  Provider: ProfileProvider,
  useProvider: useProfileProvider,
} = makeProvider(useProfile);