import { createRoot } from 'react-dom/client';

import { ClassicPanel } from './ClassicPanel';
import { seoEditorEnv } from './env';

import '@fontsource-variable/inter';
import '../style/editor.css';

const mount = (): void => {
  const env = seoEditorEnv;
  const node = document.getElementById('recomaze-seo-classic');
  const input = document.getElementById('recomaze-seo-meta');
  if (
    !env ||
    env.screen === 'block' ||
    !node ||
    !(input instanceof HTMLInputElement)
  ) {
    return;
  }
  createRoot(node).render(<ClassicPanel env={env} input={input} />);
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mount);
} else {
  mount();
}