import React from 'react';
// import PropTypes from 'prop-types';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles';
import flush from 'styled-jsx/server';
import theme from '../components/atoms/theme'

import { GA_TRACKING_ID } from '../src/gtag'
class MyDocument extends Document {

  // static async getInitialProps(ctx) {
  //   const initialProps = await Document.getInitialProps(ctx)
  //   return { ...initialProps }
  // }


  render() {
    const { pageContext } = this.props;

    return (
      <html lang="fr" dir="ltr">
        <Head>
          <meta name="google-site-verification" content="CQsVLRoDEzxN5TT4zoTIPy_v4JWGPQgg29OLNx8EkXw" />
          <meta charSet="utf-8" />
          {/* Robots desactivated in phase 1 : the root website talentstube.com is still active */}
          {/* <meta key="robots" name="robots" content="noindex, nofollow"></meta> */}
          {/* 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={theme.palette.primary.main} />
          <link rel="preload" href="/statique/css/fonts.css" rel="stylesheet">

          </link>
          <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
          <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYV8IJGtIoWLfXJQQvIuDQ88n2aEuRgpg&libraries=places"></script>
          <script async type="text/javascript" src="/static/js/pwaInstaller.js" ></script>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          {/* <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}');
          `
            }}
          /> */}

          <script defer 
            dangerouslySetInnerHTML={{
              __html: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P4G65WJ');
`
            }}
          />
          <link rel="manifest" href="/static/manifest.json" />

          <link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' />
          <link rel="mask-icon" href="/static/images/icons/talentstubeIco.svg" color="#1689FB" />
          <link rel="icon" type="image/png" sizes="32x32" href="/static/images/icons/talentstubeIco32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/static/images/icons/talentstubeIco16x16.png" />

          <meta name="apple-mobile-web-app-capable" content="yes" />
          <link rel="apple-touch-icon" href="/static/images/icons/talentstubeIco57x57.png" />
          <link rel="apple-touch-icon" sizes="152x152" href="/static/images/icons/talentstubeIco152x152.png" />
          <link rel="apple-touch-icon" sizes="167x167" href="/static/images/icons/talentstubeIco167x167.png" />
          <link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/talentstubeIco180x180.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="#1689FB" />
        </Head>
        <body style={{ margin: 0, padding: 0 }}>

          <noscript>
            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P4G65WJ"
              height="0" width="0" style={{ display: 'none', visibility: 'hidden' }}>
            </iframe>
          </noscript>

          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

MyDocument.getInitialProps = async 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
  const sheets = new ServerStyleSheets();

  const originalRenderPage = ctx.renderPage;
  // Render app and page and get the context of the page with collected side effects.

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: (
      <React.Fragment>
        {sheets.getStyleElement()}
        {flush() || null}
      </React.Fragment>
    ),
  };
};

export default MyDocument;
