import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export function usePageLoading() {
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  function handleStart() {
    return setLoading(true);
  }
  function handleComplete() {
    return setLoading(false);
  }

  useEffect(() => {
    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, []);

  return {
    loading,
  };
}