/**
 * Translate control host for the Elementor editor.
 *
 * Elementor's panel is Backbone, so the "Translate" button control there
 * raises an editor event (see ElementorIntegration/assets/editor.js), which
 * calls window.arraySubsTranslateField.open() with the custom message HTML.
 * This mounts the shared translate dialog once and reuses it per request.
 */
import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import TranslateFieldModal from "@libs/translate-field/TranslateFieldModal";
import { ToastContainer, useToast } from "@libs/toast";
import "@libs/translate-field/translate-field.scss";
import "@libs/toast/toast.scss";

const Host = () => {
  const [request, setRequest] = useState(null);
  const { toasts, showToast, removeToast } = useToast();

  useEffect(() => {
    let id = 0;
    window.arraySubsTranslateField = {
      open: ({ text, format = "html", multiline = true, title }) =>
        setRequest({ id: ++id, text, format, multiline, title }),
    };
    return () => {
      delete window.arraySubsTranslateField;
    };
  }, []);

  return (
    <>
      {request && (
        <TranslateFieldModal
          key={request.id}
          text={request.text}
          format={request.format}
          multiline={request.multiline}
          title={request.title}
          showToast={showToast}
          onClose={() => setRequest(null)}
        />
      )}
      <ToastContainer toasts={toasts} removeToast={removeToast} />
    </>
  );
};

const mount = document.createElement("div");
mount.id = "arraysubs-translate-field-host";
document.body.appendChild(mount);
createRoot(mount).render(<Host />);