import { useStaticRendering } from 'xmobx/mobx-react'
import { requireClient } from '../requireClient'
import {
  respondRedirect,
  respondHyperText,
  respondError,
} from '../../responders'
import { ServerHTML } from '../../HTML'
import { Request, Response } from '../../typings'
import { ServerSideRenderMaster } from './ServerSideRenderMaster'
import { ServerSideRenderContext } from './ServerSideRenderContext'

/**
 * @todo maybe this would be module-scope and not needed every request?
 * @see https://github.com/mobxjs/mobx-react
 * > "To avoid leaking memory when server side rendering"
 */
useStaticRendering(true)

export async function renderUsingServerSideRendering(
  req: Request,
  res: Response,
  nonce: string
) {
  const context = new ServerSideRenderContext()
  const master = new ServerSideRenderMaster(context)

  console.log('[SSR] RENDERING_SSR_FOR_ROUTE:')

  /**
   * injected client dependencies
   */
  Object.assign(context, requireClient())

  master.setup()
  master.renderApp()

  const encasedOnBootstrap = () => {
    try {
      context.htmlView = master.renderToString()
      master.onSuccess()
      context.reset()
    } catch (renderReactToStringException) {
      console.log('[ssr] TOSTRING ERROR', renderReactToStringException)
      master.onError(renderReactToStringException)
      context.reset()
    }
  }

  try {
    master
      .walk()
      .then(encasedOnBootstrap)
      .catch(master.onError)
  } catch (bootstrapperException) {
    console.log('[ssr] BOOTSTRAPPER ERROR', bootstrapperException)
    master.onError(bootstrapperException)
    context.reset()
  }
}