import '../styles/globals.scss';
import { Provider } from 'react-redux';
import type { AppProps } from 'next/app';
import PageTransition from '../components/PageTransition';
import InitialLoader from '../components/InitialLoader';
import { useStore } from '../redux/store';
import { PageProps } from '../components/Page';
import '../styles/swiper.scss';
import React from 'react';
import localFont from '@next/font/local';
import { isInitialLoaderVisible } from '../api/storage';

const atakRegularFont = localFont({
  src: '../public/fonts/AtakRegular-Web.woff2',
});

function App({ Component, pageProps }: AppProps) {
  const store = useStore();
  const _pageProps = pageProps as PageProps;

  const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!pageProps) {
    return null;
  }

  return (
    <Provider store={store}>
      {hasMounted &&
      _pageProps?.bootstrap?.title &&
      _pageProps?.bootstrap?.images &&
      isInitialLoaderVisible() ? (
        <InitialLoader
          title={_pageProps.bootstrap.title}
          images={_pageProps.bootstrap.images}
        />
      ) : null}
      {hasMounted && _pageProps?.bootstrap?.phrases ? (
        <PageTransition phrases={_pageProps.bootstrap.phrases} />
      ) : null}
      {hasMounted && (
        <main className={atakRegularFont.className}>
          <Component {...pageProps} />
        </main>
      )}
    </Provider>
  );
}

export default App;