import Head from 'next/head';
import NProgress from 'nprogress';
import { Router } from 'next/router';
import { SWRConfig } from 'swr';
import Page from '../components/Page';
import '../components/styles/nprogress.css';
import fetch from '../lib/fetchJson';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

function MyApp({ Component, pageProps }) {
  return (
    <SWRConfig
      value={{
        fetcher: fetch,
        onError: (err) => {
          console.error(err);
        },
      }}
    >
      <Page>
        <Head>
          <link rel="icon" type="image/svg" href="/penguin.svg" />
          {/* meta tags */}
          <meta charSet="utf-8" />
          <meta name="description" content="Wedding Website" />
          <meta name="theme-color" content="#FCCFB9" />
          <meta name="robots" content="noindex" />
          <meta name="googlebot" content="noindex" />
          <link
            rel="preload"
            href="/fonts/Josefin_Sans/static/JosefinSans-Regular.ttf"
            as="font"
            crossOrigin=""
          />
          <link
            rel="preload"
            href="/fonts/Josefin_Sans/static/JosefinSans-Bold.ttf"
            as="font"
            crossOrigin=""
          />
          <noscript>
            <link rel="stylesheet" href="assets/css/noscript.css" />
          </noscript>
        </Head>
        <noscript>
          <div id="no-script">
            <div id="no-script-box">
              <img
                id="no-script-img"
                src="assets/images/js-logo.png"
                alt="Please enable JavaScript"
              />
              <h1 id="no-script-maintext">
                Please enable JavaScript to view the site.
              </h1>
              <h2 id="no-script-subtext">
                This Web application relies on Javascript to function, please{' '}
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Enable JavaScript Insructions"
                  href="https://www.enable-javascript.com/"
                >
                  enable
                </a>{' '}
                it. Thank You! 🚀
              </h2>
            </div>
          </div>
        </noscript>
        <Component {...pageProps} />
      </Page>
    </SWRConfig>
  );
}

export default MyApp;
