import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as ReactDOMClient from 'react-dom/client'
import * as JsxRuntime from 'react/jsx-runtime'
import * as DndCore from '@dnd-kit/core'
import * as DndSortable from '@dnd-kit/sortable'
import * as DndUtilities from '@dnd-kit/utilities'
import * as registry from './extensions/registry'
import App from './App.jsx'
import './index.css'

/*
 * Runtime extension API (window.wpvfbBuilder).
 *
 * `modules` gives extensions the builder's own module instances (one React, one set of stores and contexts), keyed by
 * their path relative to src/ (e.g. "./store/useFormStore.js") plus the shared libraries by package name. The other
 * keys are the registration functions from extensions/registry.js.
 */
const sourceModules = import.meta.glob(['./**/*.{js,jsx}', '!./main.jsx'], { eager: true })

const api = {
  version: 1,
  modules: {
    ...sourceModules,
    react: React,
    'react-dom': ReactDOM,
    'react-dom/client': ReactDOMClient,
    'react/jsx-runtime': JsxRuntime,
    '@dnd-kit/core': DndCore,
    '@dnd-kit/sortable': DndSortable,
    '@dnd-kit/utilities': DndUtilities,
  },
  addFilter: registry.addFilter,
  applyFilters: registry.applyFilters,
  addAction: registry.addAction,
  doAction: registry.doAction,
  registerSlot: registry.registerSlot,
  registerFieldType: registry.registerFieldType,
  registerTemplates: registry.registerTemplates,
  refresh: registry.refresh,
}

if (typeof window !== 'undefined') {
  window.wpvfbBuilder = Object.assign(window.wpvfbBuilder || {}, api)
}

// Render once the document has finished parsing, so extension scripts loaded after this module have registered.
let started = false
const start = () => {
  if (started) return
  const rootElement = document.getElementById('wpvfb-builder-root')
  if (!rootElement) return
  started = true
  ReactDOMClient.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
}

if (document.readyState === 'complete') {
  setTimeout(start, 0)
} else {
  document.addEventListener('DOMContentLoaded', start)
  window.addEventListener('load', start)
}