// 🚇 middleware to activate Dynamic Rendering on Express
const BOTS_USER_AGENTS = [
  'googlebot',
  'google-structured-data-testing-tool',
  'mediapartners-google'
]

const INDEX_HTML_PATH = path.join(__dirname, 'public', 'index.html')
const HTML_TEMPLATE = fs.readFileSync(INDEX_HTML_PATH, 'utf8')

export default function(req, res, next) {
  const rawUserAgent = req.get('user-agent')
  const userAgent = rawUserAgent.toLowerCase()

  // check if the request comes from a bot 🤖
  if (BOTS_USER_AGENTS.find(ua => userAgent.includes(ua))) {
    // if not an user, just use the normal behaviour (SSR?)
    return next()
  }

  // return index.html directly if is an user 👩‍💻
  return res.send(HTML_TEMPLATE)
}

// 🚆 Using the middleware in Express
const dynamicRendering = require('./dynamic-rendering')

// Use dynamic rendering for a specific path for testing
app.get(
    '/es/:op/:type/barcelona-capital/*',
    dynamicRenderingExperiment
)

// Isomorphic routes handler
app.get('*', SSR)

// ⚛️ Using <DynamicRendering /> component 
// userAgent must be retrieved universally on server and client

<DynamicRendering userAgent={universalUserAgent}>
    <a href='https://very-interesting-url.com'>
        <VeryComplexToComputeComponent />
        <img src='https://huge-image.com/panda.jpg'/>
    </a>
</DynamicRendering>

<DynamicRendering disabled>
  <img src='https://huge-image.com/panda_02.jpg'/>
</DynamicRendering>

<DynamicRendering height={50}>
  <img src='https://huge-image.com/panda_02.jpg'/>
</DynamicRendering>

<DynamicRendering height={50} forceRender={true}>
  <p>This will be rendered on client & server even
    when is out the viewport
  </p>
  <p>Or in the server even when is a regular user agent</p>
  <img src='https://huge-image.com/panda_02.jpg'/>
</DynamicRendering>

// ⚛️ <DynamicRendering /> implementation

export default function DynamicRendering(props) {
  const { children, disabled, forceRender, height, userAgent } = props

  // check if the userAgent is a bot and if we're in the browser
  const isBot = checkUserAgentIsBot({userAgent})
  const isOnBrowser = typeof window !== 'undefined'

  // Force render in server and client
  if (forceRender) return children

  // if isBot or disabled, we return in server and client the content
  if (isBot) return children

  // now, we're sure the user isNotBot
  // so check if we're on the browser side and if is not disabled the component
  if (isOnBrowser && !disabled) {
    return <LazyContent height={height}>{children}</LazyContent>
  } else {
    // so, we're on the server side or the component is disabled
    return <div style={{height: `${height}px`}} />
  }
}

// ⚛️ <StaticContent /> usage
import StaticContent from './StaticContent'

function Footer () {
  return (
    <StaticContent>
      <HugeListOfLinks data={listOfLinks} />
    </StaticContent>
  )
}

// ⚛️ <StaticContent /> component
import React from 'react'

export default function StaticContent({children}) {
  // we're in the server, just render the content
  if (typeof window === 'undefined') {
    return <div>{children}</div>
  }

  // avoid re-render on the client
  return (
    <div
      suppressHydrationWarning
      dangerouslySetInnerHTML={{__html: ''}}
    />
  )
}