import React__default, { useRef, useState, useEffect, Suspense } from "react";
import { e as editor } from "./toggleHighContrast-c61dc8d4.js";
import { t } from "easy-email-pro-core";
const VariablesEditorContent = (props) => {
  const { onChange } = props;
  const valueRef = useRef(props.initialValue);
  const [editor$1, setEditor] = useState(null);
  const monacoEl = useRef(null);
  useEffect(() => {
    if (monacoEl) {
      setEditor((editor2) => {
        if (editor2)
          return editor2;
        const monEditor = editor.create(monacoEl.current, {
          value: valueRef.current,
          language: "json",
          automaticLayout: true,
          minimap: { enabled: false },
          theme: "vs-dark"
        });
        monEditor.onDidChangeModelContent(() => {
          onChange(monEditor.getValue());
        });
        return monEditor;
      });
    }
    return () => editor$1 == null ? void 0 : editor$1.dispose();
  }, [editor$1, onChange]);
  return /* @__PURE__ */ React__default.createElement(
    Suspense,
    {
      fallback: /* @__PURE__ */ React__default.createElement(
        "div",
        {
          style: {
            height: "100%",
            width: "100%",
            display: "flex",
            alignItems: "center",
            backgroundColor: "#263238",
            justifyContent: "center",
            fontSize: 24,
            color: "#fff"
          }
        },
        t(`Editor Loading...`)
      )
    },
    /* @__PURE__ */ React__default.createElement(
      "div",
      {
        style: {
          height: "100%",
          width: "100%",
          position: "relative"
        },
        ref: monacoEl
      }
    )
  );
};
export {
  VariablesEditorContent as default
};
