import React, {PropTypes} from 'react'
import generateScriptLoader from '../util/generateScriptLoader'
import AppLoadingScreen from './AppLoadingScreen'

function assetUrl(staticPath, item) {
  const isAbsolute = item.path.match(/^https?:\/\//)
  if (isAbsolute) {
    return item.path
  }

  const base = `${staticPath}/${item.path}`
  if (!item.hash) {
    return base
  }

  const hasQuery = base.indexOf('?') !== -1
  const separator = hasQuery ? '&' : '?'
  return `${base}${separator}${item.hash}`
}

function Document(props) {
  const stylesheets = props.stylesheets.map(item =>
    <link
      key={item.path}
      rel="stylesheet"
      href={assetUrl(props.staticPath, item)}
    />
  )

  const subresources = props.scripts.map(item =>
    <link
      key={item.path}
      rel="subresource"
      href={assetUrl(props.staticPath, item)}
    />
  )

  const scripts = props.scripts.map(item => assetUrl(props.staticPath, item))
  const scriptLoader = generateScriptLoader(scripts)

  const favicons = props.favicons.map((item, index) =>
    <link
      key={item.path + index}
      rel="icon"
      href={assetUrl(props.staticPath, item)}
    />
  )
  return (
    <html>
      <head>
        <meta charSet={props.charset} />
        <title>{props.title}</title>
        {stylesheets}
        {subresources}
        {favicons}
        <meta name="viewport" content={props.viewport} />
      </head>
      <body>
        <div id="sanity">
          <AppLoadingScreen text={props.loading} />
        </div>

        {/* eslint-disable react/no-danger */}
        <script dangerouslySetInnerHTML={{__html: scriptLoader}} />
        {/* eslint-enable react/no-danger */}
      </body>
    </html>
  )
}

const asset = PropTypes.shape({
  path: PropTypes.string.isRequired,
  hash: PropTypes.string
})

Document.defaultProps = {
  charset: 'utf-8',
  title: 'Sanity',
  viewport: 'width=device-width, initial-scale=1',
  loading: 'Restoring Sanity…',
  staticPath: '/static',
  favicons: [{path: 'favicon.ico'}],
  stylesheets: [],
  scripts: []
}

Document.propTypes = {
  charset: PropTypes.string,
  title: PropTypes.string,
  viewport: PropTypes.string,
  loading: PropTypes.node,
  staticPath: PropTypes.string,
  favicons: PropTypes.arrayOf(asset),
  stylesheets: PropTypes.arrayOf(asset),
  scripts: PropTypes.arrayOf(asset)
}

export default Document

@@ -985,16 +985,153 @@
 scripts)
+%0A  const clientHints = props.clientHints.length %3E 0%0A    ? %3Cmeta httpEquiv=%22Accept-CH%22 content=%7Bprops.clientHints.join(',')%7D /%3E%0A    : null
 %0A%0A  cons
@@ -1406,16 +1406,96 @@
 /title%3E%0A
+        %3Cmeta name=%22viewport%22 content=%7Bprops.viewport%7D /%3E%0A        %7BclientHints%7D%0A
         
@@ -1554,66 +1554,8 @@
 ns%7D%0A
-        %3Cmeta name=%22viewport%22 content=%7Bprops.viewport%7D /%3E%0A
     
@@ -2173,16 +2173,40 @@
 ico'%7D%5D,%0A
+  clientHints: %5B'DPR'%5D,%0A
   styles
@@ -2229,16 +2229,17 @@
 ipts: %5B%5D
+,
 %0A%7D%0A%0ADocu
@@ -2481,16 +2481,16 @@
 asset),%0A
-
   script
@@ -2516,16 +2516,69 @@
 f(asset)
+,%0A  clientHints: PropTypes.arrayOf(PropTypes.string),
 %0A%7D%0A%0Aexpo

Allow specifying client hints as a property to the document