text: /* eslint react/no-danger: 0 */
  import React, { PropTypes } from "react";
  
  import { trackingId } from "../config";
  import ga from "../server/ga";
  import { provideContext, connectToStores } from "fluxible-addons-react";
  
  const css = [];
  const scripts = [];
  
  if (process.env.NODE_ENV === "production") {
    // on production, include scripts and css from the webpack stats
    const config = require("../../webpack/prod.config");
    const stats = require("../../static/dist/stats.json");
    scripts.push(`${config.output.publicPath}${stats.main}`);
    css.push(`${config.output.publicPath}${stats.css}`);
  }
  else {
    // on development, use the webpack dev server config
    // css are not needed since they are injected inline with webpack
    const config = require("../../webpack/dev.config");
    scripts.push(`${config.output.publicPath}${config.output.filename}`);
  }
  
  
  @provideContext()
  @connectToStores([], context => {
    const htmlHeadStore = context.getStore("HtmlHeadStore");
    return {
      title: htmlHeadStore.getTitle(),
      description: htmlHeadStore.getDescription(),
      siteName: htmlHeadStore.getSiteName(),
      currentUrl: htmlHeadStore.getCurrentUrl(),
      images: htmlHeadStore.getImages()
    };
  })
  export default class Html extends React.Component {
  
    static propTypes = {
      context: PropTypes.object.isRequired,
      lang: PropTypes.string.isRequired,
      state: PropTypes.string.isRequired,
      content: PropTypes.string.isRequired,
  
      // meta tags, title, etc.
      title: PropTypes.string,
      description: PropTypes.string,
      siteName: PropTypes.string,
      currentUrl: PropTypes.string,
      images: PropTypes.array
    }
  
    static defaultProps = {
      meta: {}
    }
  
    render() {
      const { state, content, lang } = this.props;
      const { title, description, siteName, currentUrl, images } = this.props;
      return (
        <html lang={ lang }>
          <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  
            <title>{ title }</title>
  
            <meta name="description" content={ description } />
            <meta property="og:type" content="website" />
            <meta property="og:site_name" content={ siteName } />
            <meta property="og:title" content={ title } />
            <meta property="og:description" content={ description } />
            <meta property="og:url" content={ currentUrl } />
  
            { images.map(url => <meta property="og:image" content={ url } />) }
  
            { css.map((href, k) => <link key={ k } rel="stylesheet" type="text/css" href={ href } />) }
  
            { trackingId && <script dangerouslySetInnerHTML={ {__html: ga.replace("{trackingId}", trackingId)} } /> }
  
          </head>
  
          <body>
            <div id="content" dangerouslySetInnerHTML={ {__html: content} } />
  
            <script dangerouslySetInnerHTML={ {__html: state} } />
  
            { scripts.map((src, i) => <script src={ src } key={ i } />) }
  
          </body>
        </html>
      );
    }
  }
  