import router from "next/router";
import {
  ReactNode,
  createContext,
  useContext,
  useEffect,
  useState,
} from "react";

interface IProviderProps {
  children: ReactNode;
}

interface ILoadPageContextData {
  isLoadingPage: boolean;
}

const LoadPageContext = createContext({} as ILoadPageContextData);

export const LoadPageProvider = ({ children }: IProviderProps) => {
  const [isLoadingPage, setIsLoadingPage] = useState(true);

  useEffect(() => {
    const handleRouterChangeStart = () => {
      setIsLoadingPage(true);
    };

    const handleRouterChangeComplete = () => {
      setIsLoadingPage(false);
    };
    handleRouterChangeComplete();

    router.events.on("routeChangeStart", handleRouterChangeStart);
    router.events.on("routeChangeComplete", handleRouterChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouterChangeStart);
      router.events.off("routeChangeComplete", handleRouterChangeComplete);
    };
  }, []);

  return (
    <LoadPageContext.Provider value={{ isLoadingPage }}>
      {children}
    </LoadPageContext.Provider>
  );
};

export const useLoadPageContext = () => {
  return useContext(LoadPageContext);
};