text: import path from 'path';
  import favicon from '../assets/images/favicon.ico';
  import touchicon from '../assets/images/icon.png';
  
  const debug = require('../stdout').default('server:layout');
  
  function genJSTag(p) {
    return p ? `<script src=${p} type="text/javascript" charSet="utf-8"></script>` : '';
  }
  
  function genCSSTag(p) {
    return p ? `<link href=${p} rel="stylesheet" />` : '';
  }
  
  function genTag(targetPath, type) {
    if (!targetPath) {
      return '';
    }
    let method = () => {};
    let targetPaths = targetPath;
    if (type === 'CSS') { method = genCSSTag; }
    if (type === 'JS') { method = genJSTag; }
    if (!Array.isArray(targetPaths)) {
      targetPaths = [targetPaths];
    }
    const res = targetPaths.reduce((accu, p) => `${accu}\n${method(p)}`, '');
    return res;
  }
  
  function getAssetInfo(asset, publicPath) {
    let js;
    let css;
    if (Array.isArray(asset)) {
      js = [];
      css = [];
      asset.forEach((a) => {
        if (/\.js$/.test(a)) { js.push(path.join(publicPath, a)); }
        if (/\.css/.test(a)) { css.push(path.join(publicPath, a)); }
      });
    } else {
      js = asset ? path.join(publicPath, asset) : '';
    }
    return { js, css };
  }
  
  function parseStats(clientStats, currentEntry) {
    const { assetsByChunkName, publicPath } = clientStats;
    const currentEntryAsset = assetsByChunkName[currentEntry] || '';
    // check each assetsByChunkName
    // treat any chunk name includes currentEntry
    // as related asset
    const relatedAssets = Object.keys(assetsByChunkName).map((k) => {
      const res = k.indexOf(currentEntry) > -1 && k !== currentEntry ? assetsByChunkName[k] : '';
      return res;
    });
    debug('here', relatedAssets);
    return {
      main: getAssetInfo(currentEntryAsset, publicPath),
      related: relatedAssets.map(asset => getAssetInfo(asset, publicPath)),
    };
  }
  
  function renderFullPage(content, reduxState, head, currentEntry, clientStats) {
    const {
      main: targetAssets,
      related: relatedAssets,
    } = parseStats(clientStats, currentEntry);
    debug('targetAssets', targetAssets);
    const targetJS = genTag(targetAssets.js, 'JS');
    const targetCSS = genTag(targetAssets.css, 'CSS');
    let relatedCSS = '';
    let relatedJS = '';
    relatedAssets.map((r) => {
      if (r.js) relatedJS += genTag(r.js, 'JS');
      if (r.css) relatedCSS += genTag(r.css, 'CSS');
      return false;
    });
  
    return `
      <!doctype html>
      <html>
        <head>
          <!-- Global site tag (gtag.js) - Google Analytics -->
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-44385510-4"></script>
          <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
  
            gtag('config', 'UA-44385510-4');
          </script>
  
          <meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
          ${head.title.toString()}
          ${head.meta.toString()}
  
          <link rel="icon" type="image/x-icon" href=${favicon} />
          <link rel="apple-touch-icon" href=${touchicon} />
  
          <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
          ${relatedCSS}
          ${targetCSS}
  
          <script type="text/javascript" charSet="utf-8">
            window.__REDUX_STATE__ = ${reduxState}
          </script>
        </head>
        <body>
          <div id="app-mount-point">${content}</div>
          ${relatedJS}
          <!-- entry script generated by webpack -->
          ${targetJS}
        </body>
      </html>
    `;
  }
  
  export default renderFullPage;
  