import axios from 'axios'
import React from 'react'
import { createRoot, hydrateRoot } from 'react-dom/client'

const csrfToken = typeof document !== 'undefined'
  ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
  : null

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

if (csrfToken) {
  axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken
}

if (typeof window !== 'undefined') {
  window.axios = axios
}

export function mountInertiaRoot(el, App, props) {
  if (!el) {
    return null
  }

  const node = React.createElement(App, props)
  const hasServerMarkup = el.childNodes.length > 0 && el.innerHTML.trim() !== ''

  if (hasServerMarkup) {
    return hydrateRoot(el, node)
  }

  return createRoot(el).render(node)
}