/**
 * @see https://github.com/koba04/react-fiber-resources
 * @see https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
 * @description can render or hydrate, used by renderClientView & tests
 */
import React from 'react'
import { ComponentType } from 'react'
import { hydrate } from 'react-dom'
import { BrowserRouter, MemoryRouter } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { ReactHotLoader } from '../bootstrapper/containers/ReactHotLoader'
import { client } from './apolloClient'

const IS_BROWSER = typeof window === 'object'
const ROOT = typeof window === 'object' ? window : global

const DOCUMENT: Document =
  typeof document === 'object'
    ? document
    : require('./MOCK_DOCUMENT').MOCK_DOCUMENT

// router that works for tests too
const Router = process.env.NODE_ENV === 'testing' ? MemoryRouter : BrowserRouter

// router state from server
const rehydrateRouterState = (ROOT as any).__ROUTER_STATE__

// Get the DOM Element that will host our React application.
const container = DOCUMENT.querySelector('#root')

function finalRehydration(app: JSX.Element) {
  const rehydrated = hydrate(app, container)
  return rehydrated
}

/**
 * Renders the given React Application component.
 */
function renderAppFinal(App: ComponentType) {
  /**
   * Firstly, define our full application component,
   * wrapping the given component app
   * with a browser based version of react router.
   *
   * @see https://github.com/gaearon/react-hot-loader/issues/667
   */
  const app = (
    <React.StrictMode>
      <ReactHotLoader warnings={false} errors={false}>
        <Router rehydrateState={rehydrateRouterState}>
          <ApolloProvider client={client}>
            <App />
          </ApolloProvider>
        </Router>
      </ReactHotLoader>
    </React.StrictMode>
  )

  return finalRehydration(app)
}

/**
 * @description the actual renderApp function, decision tree for sync vs async
 */
function renderApp(App: ComponentType) {
  if (isLoadingInIframe()) {
    top.location = self.location as Location
    return undefined
  } else {
    return renderAppFinal(App)
  }
}

/**
 * @todo @anto we need to add conditions to prevent reloading for CSR admins
 */
function isLoadingInIframe() {
  return IS_BROWSER && window.parent.frames.length > 0
}

export { renderApp }