// @flow
import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
import { readFileSync } from 'fs'
import { join } from 'path'

class InlineStylesHead extends Head {
  getCssLinks() {
    return this.__getInlineStyles()
  }

  __getInlineStyles() {
    const { assetPrefix, files } = this.context
    if (!files || files.length === 0) return null

    return files
      .filter((file) => /\.css$/.test(file))
      .map((file) => (
        <style
          key={file}
          nonce={this.props.nonce}
          data-href={`${assetPrefix}/_next/${file}`}
          dangerouslySetInnerHTML={{
            __html: readFileSync(join(process.cwd(), '.next', file), 'utf-8'),
          }}
        />
      ))
  }
}

/*
  This code has been obtained from:
  https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871
*/

class CustomDocument extends Document {
  render() {
    return (
      <html lang="en">
        <InlineStylesHead />
        <body>
          <Main />
          <NextScript />
          <script
            type="text/javascript"
            dangerouslySetInnerHTML={{
              __html: `(function(a,e,f,g,b,c,d){a.GoogleAnalyticsObject=b;a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)};a[b].l=1*new Date;c=e.createElement(f);d=e.getElementsByTagName(f)[0];c.async=1;c.src=g;d.parentNode.insertBefore(c,d)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create","UA-67824860-7","auto");ga("send","pageview");`,
            }}
          />
          <script
            type="text/javascript"
            dangerouslySetInnerHTML={{
              __html: `(function(e){function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function b(a){this.options=d({},this.options);d(this.options,a);this._init()}b.prototype.options={wrapper:document.body,message:"yo!",layout:"growl",effect:"slide",type:"error",ttl:6E3,onClose:function(){return!1},onOpen:function(){return!1}};b.prototype._init=function(){this.ntf=document.createElement("div");this.ntf.className="ns-box ns-"+this.options.layout+" ns-effect-"+this.options.effect+" ns-type-"+this.options.type;
 this.ntf.innerHTML='<div class="ns-box-inner">'+this.options.message+'</div><span class="ns-close"></span></div>';this.options.wrapper.insertBefore(this.ntf, this.options.wrapper.nextSibling);var a=this;this.dismissttl=setTimeout(function(){a.active&&a.dismiss()},this.options.ttl);this._initEvents()};b.prototype._initEvents=function(){var a=this;this.ntf.querySelector(".ns-close").addEventListener("click",function(){a.dismiss()})};b.prototype.show=function(){this.active=!0;this.ntf.classList.remove("ns-hide");
 this.ntf.classList.add("ns-show");this.options.onOpen()};b.prototype.dismiss=function(){var a=this;this.active=!1;clearTimeout(this.dismissttl);this.ntf.classList.remove("ns-show");setTimeout(function(){a.ntf.classList.add("ns-hide");a.options.onClose()},25);var b=function(c){if(c.target!==a.ntf)return!1;this.removeEventListener("animationend",b);a.options.wrapper.removeChild(this)};this.ntf.addEventListener("animationend",b)};e.NotificationFx=b})(window);`,
            }}
          />
        </body>
      </html>
    )
  }
}

export default CustomDocument

@@ -46,16 +46,22 @@
 ument, %7B
+ Html,
  Head, M
@@ -936,17 +936,17 @@
 %0A      %3C
-h
+H
 tml lang
@@ -952,16 +952,33 @@
 g=%22en%22%3E%0A
+        %3CHead%3E%0A  
         
@@ -994,24 +994,40 @@
 ylesHead /%3E%0A
+        %3C/Head%3E%0A
         %3Cbod
@@ -3243,17 +3243,17 @@
       %3C/
-h
+H
 tml%3E%0A   

Fix _document inline styles