// a function to retry loading a chunk to avoid chunk load error for out of date code
import { Suspense, lazy } from 'react';

import LoadingScreen from './components/LoadingScreen';

export const lazyRetry = (componentImport: Function) =>
  lazy(async () => {
    // check if the window has already been refreshed
    const hasRefreshed = JSON.parse(
      window.sessionStorage.getItem('retry-lazy-refreshed') || 'false',
    );

    // try to import the component
    try {
      const component = await componentImport(); // await because we need it to fail here
      return component;
    } catch (error: any) {
      if (
        !hasRefreshed &&
        error?.message?.includes('Failed to fetch dynamically imported module')
      ) {
        // not been refreshed yet
        window.sessionStorage.setItem('retry-lazy-refreshed', 'true');
        window.location.reload(); // refresh the page
        return new Promise(() => {}); // return a promise to avoid type error
      }

      window.sessionStorage.setItem('retry-lazy-refreshed', 'false');
      throw error; // Default error behaviour as already tried refresh
    }
  });

export const Loadable = (Component: React.ComponentType<any>) => {
  const LoadableComponent = (props: any) => (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>
  );
  LoadableComponent.displayName = 'LoadableComponent';
  return LoadableComponent;
};