import { hasFlag } from 'country-flag-icons'
import { hydrateRoot, createRoot } from 'react-dom/client'

import App from 'src/App'
/**
 * When `#redwood-app` isn't empty then it's very likely that you're using
 * prerendering. So React attaches event listeners to the existing markup
 * rather than replacing it.
 * https://react.dev/reference/react-dom/client/hydrateRoot
 */
const redwoodAppElement = document.getElementById('redwood-app')

if (!redwoodAppElement)
  throw new Error(
    "Could not find an element with ID 'redwood-app'. Please ensure it " +
      "exists in your 'web/src/index.html' file."
  )

if (!hasFlag(process.env.COUNTRY))
  throw new Error(
    'Invalid COUNTRY environment variable, please select a valid ISO-3166-1 alpha-2 country code\n See https://en.wikipedia.org/wiki/ISO_3166-1#Codes'
  )

if (redwoodAppElement.children?.length > 0)
  hydrateRoot(redwoodAppElement, <App />)
else {
  const root = createRoot(redwoodAppElement)
  root.render(<App />)
}