import { createElement } from 'react'

import { render } from 'react-dom'

import HeadManager from './head-manager'

import { rehydrate } from '../lib/css'

import Router from '../lib/router'

import DefaultApp from '../lib/app'

import evalScript from '../lib/eval-script'

const {

__NEXT_DATA__: { app, component, props, ids, err }

} = window

const App = app ? evalScript(app).default : DefaultApp

const Component = evalScript(component).default

export const router = new Router(window.location.href, { Component, ctx: { err } })

const headManager = new HeadManager()

const container = document.getElementById('__next')

const appProps = { Component, props, router, headManager }

rehydrate(ids)

render(createElement(App, appProps), container)