import { jsxs as P, jsx as i } from "react/jsx-runtime";
import { useState as S, useRef as z, useCallback as a, useEffect as f, useMemo as F } from "react";
import { Editor as L } from "@monaco-editor/react";
import V from "./hooks/useDragAndDropProvider.js";
import g from "./components/code-editor-loader/CodeEditorLoader.js";
import A from "../error-message/ErrorMessage.js";
import { c as R } from "../../index-BtlgVD4m.js";
import '../../CodeEditor.css';const $ = ({
  height: h = "500px",
  defaultLanguage: E = "javascript",
  value: x,
  onChange: o,
  readOnly: l = !1,
  errorMessage: c,
  isLoading: T = !1,
  typeScriptDefinitions: n
}) => {
  const [k, D] = S(l), u = z(null), M = V(), d = a(() => document.documentElement.dataset.colorScheme === "dark" ? "vs-dark" : "light", []), s = a(() => {
    if (u.current) {
      const e = d();
      u.current.updateOptions({ theme: e });
    }
  }, [d]);
  f(() => {
    const e = new MutationObserver(() => {
      s();
    });
    return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-color-scheme"] }), s(), () => e.disconnect();
  }, [s]), f(() => {
    D(l);
  }, [l]);
  const j = a(
    (e) => {
      o == null || o(e || "");
    },
    [o]
  ), N = a((e) => typeof e == "number" ? `${e}px` : (/^\d+(\.\d+)?(px|rem|em|vh|vw|%)$/.test(e), e), []), y = F(() => d(), [d]), C = a(
    (e, t) => {
      u.current = e, t.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
        noSemanticValidation: !0,
        noSyntaxValidation: !1
      }), t.languages.typescript.javascriptDefaults.setCompilerOptions({
        target: t.languages.typescript.ScriptTarget.ES2015,
        allowNonTsExtensions: !0
      }), n == null || n.forEach((r) => {
        const p = r.filePath || "file:///global.d.ts";
        t.languages.typescript.javascriptDefaults.addExtraLib(r.content, p);
        const b = t.Uri.parse(p), v = t.editor.getModel(b);
        v ? v.setValue(r.content) : t.editor.createModel(r.content, "typescript", b);
      }), setTimeout(() => s(), 0);
      const O = document.documentElement.dataset.colorScheme === "dark";
      t.editor.setTheme(O ? "vs-dark" : "light");
      const w = () => {
        const r = document.documentElement.dataset.colorScheme === "dark";
        t.editor.setTheme(r ? "vs-dark" : "light");
      }, m = new MutationObserver(() => {
        w();
      });
      m.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-color-scheme"] }), e.onDidDispose(() => {
        m.disconnect();
      });
    },
    [s, n]
  );
  return /* @__PURE__ */ P("div", { className: "relative", ...M.props, children: [
    T && /* @__PURE__ */ i(g, {}),
    /* @__PURE__ */ i(
      L,
      {
        height: N(h),
        className: R(
          "rounded-[var(--border-radius-md)] py-[var(--spacing-2)] border border-[var(--base-input)]",
          !!c && "border-[var(--base-danger-text)]"
        ),
        value: x,
        language: E,
        onChange: j,
        onMount: C,
        options: {
          readOnly: k,
          minimap: { enabled: !1 },
          fontSize: 14,
          fontFamily: "monospace",
          lineNumbers: "on",
          scrollbar: {
            vertical: "auto",
            horizontal: "auto"
          },
          automaticLayout: !0,
          theme: y,
          lineNumbersMinChars: 3,
          lineDecorationsWidth: 0
        },
        loading: /* @__PURE__ */ i(g, {})
      }
    ),
    /* @__PURE__ */ i(A, { message: c })
  ] });
};
$.displayName = "CodeEditor";
export {
  $ as default
};
//# sourceMappingURL=CodeEditor.js.map
