import React, { useEffect } from 'react';
import App, { AppProps, AppContext } from 'next/app';
import { GlobalDataProvider, IGlobalData } from 'contexts';
import '../styles/reset.css';

export interface MyAppProps extends AppProps {
  globalData: IGlobalData;
}

const MyApp: React.FC<MyAppProps> = ({ Component, pageProps, globalData }) => {
  useEffect(() => {
    (window as any).__federation_shared__ = (globalThis as any).backupScope;
  }, []);
  return (
    <GlobalDataProvider value={globalData}>
      {React.createElement(Component, pageProps)}
    </GlobalDataProvider>
  );
};

(MyApp as any).getInitialProps = async (
  appContext: AppContext,
): Promise<any> => {
  const appProps = await App.getInitialProps(appContext);
  return {
    ...appProps,
    globalData: {
      isMobile: (appContext.ctx.req as any).isMobile,
      isBot: (appContext.ctx.req as any).isBot,
    },
  };
};

export default MyApp;