import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import config from 'docs/src/config';

class LoziDocument extends Document {
  render() {
    const { canonical } = this.props;

    return (
      <html lang="en" dir="ltr">
        <Head>
          <title>React-Lozi</title>
          <meta
            name="description"
            content="A UI framework designed to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging."
          />
          <meta charSet="utf-8" />
          {/* Use minimum-scale=1 to enable GPU rasterization */}
          <meta
            name="viewport"
            content={
              'user-scalable=0, initial-scale=1, ' +
              'minimum-scale=1, width=device-width, height=device-height'
            }
          />
          {/*
            manifest.json provides metadata used when your web app is added to the
            homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
          */}
          <link rel="manifest" href="/static/manifest.json" />
          {/* Twitter */}
          <meta name="twitter:card" content="summary" />
          <meta name="twitter:site" content="@ReactLozi" />
          <meta name="twitter:title" content="React-Lozi" />
          <meta
            name="twitter:description"
            content="A UI framework designed to build beautiful websites fast."
          />
          {/* Facebook */}
          <meta property="og:type" content="website" />
          <meta property="og:title" content="React-Lozi" />
          <meta
            property="og:description"
            content="A UI framework designed to build beautiful websites fast."
          />
          <meta property="og:locale" content="vi_VN" />
          <link rel="shortcut icon" href="/static/ic/favicon-32x32.png" />
          <link rel="canonical" href={canonical} />
        </Head>
        <body>
          <Main />
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${
              config.google.id
            }`}
          />
          <script
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{
              __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${config.google.id}');
            `,
            }}
          />
          <NextScript />
        </body>
      </html>
    );
  }
}

LoziDocument.getInitialProps = ctx => {
  // Get the context of the page to collected side effects.
  const pageContext = {};
  const page = ctx.renderPage(Component => props => (
    <Component pageContext={pageContext} {...props} />
  ));
  const canonical = ctx.req.url.replace(/\/$/, '');
  return {
    ...page,
    pageContext,
    canonical: `https://react-lozi.firebaseapp.com${canonical}}/`,
  };
};

export default LoziDocument;
