/**
 * Html for frontend
 * @function FrontendHtml
 */
'use strict'

import React from 'react'
import { FrontendRoot } from '../roots'
import {
  ApHtml, ApHead, ApBody
} from 'apeman-react-basic'
import {
  AssetSetting as assets,
  ColorSetting as colors,
  ThirdpartySetting
} from '../../settings'
import {
  TwitterScript,
  FacebookScript,
  HatebuScript
} from '../fragments'
import { version } from '../../../package.json'
import { create as createStore } from '../../store'
import { LocaleService } from '../../services'
import defineDebug from 'debug'
import { ApMarkdownStyle } from 'apeman-react-markdown'

const { FACEBOOK_APP_ID } = ThirdpartySetting

const debug = defineDebug('project:html:frontend')

/** @lends FrontendHtml */
const FrontendHtml = ({
  rootProps,
  storeState,
  canonical = null,
  base = '/',
  share = {}
}) => {
  const store = createStore(storeState)
  const { l } = new LocaleService(store, {})
  return (
    <ApHtml>
      <ApHead globals={ Object.assign({ app: { storeState, rootProps } }) }
              icon={ assets.frontendIcon }
              js={ assets.frontendJs }
              css={ assets.frontendCss }
              color={ colors.dominant }
              base={ base }
              version={ version }
              title={ l('app.PAGE_TITLE') }
      >
        {
          canonical ? (
              <link rel="canonical"
                    href={ canonical }
              />
            ) : null
        }
        {
          share.twitter ? (
              Object.keys(share.twitter).map((name) => (
                <meta key={name}
                      name={ `twitter:${name}` }
                      content={ share.twitter[ name ] }
                />
              ))
            ) : null
        }
        {
          share.og ? (
              Object.keys(share.og).map((name) => (
                <meta key={name}
                      name={ `og:${name}` }
                      content={ share.og[ name ] }
                />
              ))
            ) : null
        }
        <ApMarkdownStyle { ...colors }/>
        <meta property="og:site_name" content={ l('app.APP_NAME') }/>
        <meta property="fb:app_id" content={ FACEBOOK_APP_ID }/>
        <TwitterScript />
        <HatebuScript />
      </ApHead>
      <ApBody>
        <div id="fb-root"></div>
        <FacebookScript appId={ FACEBOOK_APP_ID }/>

        <div id='mount-point'>
          <FrontendRoot { ...rootProps }
                        store={ store }
          />
        </div>
      </ApBody>
    </ApHtml>
  )
}
export default FrontendHtml