import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import Editor from "./components/Editor";
import Demo from "./Demo";

import "./index.css";

function initTextareaEditors() {
  const textareas = document.querySelectorAll("textarea[data-mdxeditor]");

  if (textareas.length === 0) {
    // No textareas found, check for #mdxeditor-demo element for demo mode
    const rootElement = document.getElementById("mdxeditor-demo");
    if (rootElement) {
      createRoot(rootElement).render(
        <StrictMode>
          <Demo />
        </StrictMode>,
      );
    }
    return;
  }

  textareas.forEach((textarea, index) => {
    if (textarea.getAttribute("data-mdxeditor-initialized") === "true") {
      return;
    }

    textarea.setAttribute("data-mdxeditor-initialized", "true");

    const initialValue = textarea.value || "";
    const mdxeditorId = textarea.getAttribute('data-mdxeditor');

    const wrapper = document.createElement("div");
    wrapper.className = "mdxeditor-wrapper";
    wrapper.id = `mdxeditor-wrapper-${index}`;

    // Insert wrapper before textarea
    textarea.parentNode.insertBefore(wrapper, textarea);

    // Hide the original textarea
    textarea.style.display = "none";

    const handleChange = (markdown) => {
      textarea.value = markdown;

      textarea.dispatchEvent(new Event("input", { bubbles: true }));
      textarea.dispatchEvent(new Event("change", { bubbles: true }));
    };

    const mdxeditorSettings = window?.drupalSettings?.mdxeditor?.[mdxeditorId];

    const variables = mdxeditorSettings?.plugins?.typeaheadPlugin?.types || [];

    createRoot(wrapper).render(
      <StrictMode>
        <Editor
          initialValue={initialValue}
          onChange={handleChange}
          variables={variables}
        />
      </StrictMode>,
    );
  });
}
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initTextareaEditors);
} else {
  initTextareaEditors();
}
