import React from 'react';
import PropTypes from 'prop-types';
import Document, { Head, Main, NextScript } from 'next/document';
import flush from 'styled-jsx/server';

class MyDocument extends Document {
  render() {
    const { pageContext } = this.props;

    return (
      <html lang="fr" dir="ltr">
        <Head>
          <meta charSet="utf-8" />
          {/* TODO: A enlever avant MEP 
          <meta name="robots" content="noindex, nofollow"></meta>
*/}
          <meta name="google-site-verification" content="aR4mfPRusAD1JYt9Fu59tm-XWl3IAwHI-UKlwSTBdv8" />
          {/* Use minimum-scale=1 to enable GPU rasterization */}
          <meta name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          {/* PWA primary color */}
          <meta name="theme-color" content={pageContext.theme.palette.primary.main} />
          {/* <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
          /> */}
          <link rel="manifest" href="/static/manifest.json" />
          <link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' />

          <script type="text/javascript" src="/static/js/pwaInstaller.js" ></script>

          <link rel="mask-icon" href="/static/images/icons/e-declicIco.svg" color="#5bbad5" />
          <link rel="icon" type="image/png" sizes="32x32" href="/static/images/icons/e-declicIco32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/static/images/icons/e-declicIco16x16.png" />

          <meta name="apple-mobile-web-app-capable" content="yes" />
          <link rel="apple-touch-icon" href="/static/images/icons/e-declicIco57x57.png" />
          <link rel="apple-touch-icon" sizes="152x152" href="/static/images/icons/e-declicIco152x152.png" />
          <link rel="apple-touch-icon" sizes="167x167" href="/static/images/icons/e-declicIco167x167.png"/>
          <link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/e-declicIco180x180.png" />
          
          <link href="/static/images/splashscreen/2048x2732.png" sizes="2048x2732" rel="apple-touch-startup-image" />
          <link href="/static/images/splashscreen/1668x2224.png" sizes="1668x2224" rel="apple-touch-startup-image" />
          <link href="/static/images/splashscreen/1536x2048.png" sizes="1536x2048" rel="apple-touch-startup-image" />
          <link href="/static/images/splashscreen/1125x2436.png" sizes="1125x2436" rel="apple-touch-startup-image" />
          <link href="/static/images/splashscreen/1242x2208.png" sizes="1242x2208" rel="apple-touch-startup-image" />
          <link href="/static/images/splashscreen/750x1334.png" sizes="750x1334" rel="apple-touch-startup-image" />
          <link href="/static/images/splashscreen/640x1136.png" sizes="640x1136" rel="apple-touch-startup-image" />

          <meta name="msapplication-TileColor" content="#da532c" />

          {/* <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

MyDocument.getInitialProps = ctx => {



  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  let pageContext;
  const page = ctx.renderPage(Component => {
    const WrappedComponent = props => {
      pageContext = props.pageContext;
      return <Component {...props} />;
    };

    WrappedComponent.propTypes = {
      pageContext: PropTypes.object.isRequired,
    };

    return WrappedComponent;
  });

  return {
    ...page,
    pageContext,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: (
      <React.Fragment>
        <style
          id="jss-server-side"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
        />
        {flush() || null}
      </React.Fragment>
    ),
  };
};

export default MyDocument;
