import { jsxs, jsx } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/jsx-runtime.js';
import './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/core.js';
import { connect } from './packages/components/editors/tseditor/src/connect.js';
import { useHost, useRef } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/create-hooks.js';
import { useProp } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/custom-hooks/use-prop.js';
import { useEffect } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/use-effect.js';
import { h } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/render.js';
import { css } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/css.js';
import { c } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/element/custom-element.js';
import { useState } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/hooks.js';

const loadDependencies = async () => {
  const [
    { autocompletion },
    { javascript },
    { tsAutocompleteWorker, tsFacetWorker, tsGotoWorker, tsHoverWorker, tsLinterWorker, tsSyncWorker },
    Comlink,
    { containerStyles, editorTheme, tooltipStyles },
    { cmCollab },
    { default: TSWorker },
    { codeiumCopilot, copilotStyle },
    { EditorView, basicSetup }
  ] = await Promise.all([
    import('./node_modules/.pnpm/@codemirror_autocomplete@6.17.0_@codemirror_language@6.10.2_@codemirror_state@6.5.2_@codemirr_ojgfuxzrr456fmwqlr4b5krrrq/node_modules/@codemirror/autocomplete/dist/index.js'),
    import('./node_modules/.pnpm/@codemirror_lang-javascript@6.2.2/node_modules/@codemirror/lang-javascript/dist/index.js'),
    import('./node_modules/.pnpm/@valtown_codemirror-ts@3.0.0-9_@codemirror_autocomplete@6.17.0_@codemirror_language@6.10.2_@c_nk442kkgahslbcycc3bdhtpz6m/node_modules/@valtown/codemirror-ts/dist/index.js'),
    import('./node_modules/.pnpm/comlink@4.4.2/node_modules/comlink/dist/esm/comlink.js'),
    import('./packages/components/editors/tseditor/src/styles.js'),
    import('./packages/components/editors/tseditor/src/collab.js'),
    import('./packages/components/editors/tseditor/src/worker.js'),
    import('./packages/components/editors/tseditor/src/copilot.js'),
    import('./node_modules/.pnpm/codemirror@6.0.1_@lezer_common@1.2.1/node_modules/codemirror/dist/index.js')
  ]);
  return {
    autocompletion,
    javascript,
    tsAutocompleteWorker,
    tsFacetWorker,
    tsGotoWorker,
    tsHoverWorker,
    tsLinterWorker,
    tsSyncWorker,
    Comlink,
    containerStyles,
    editorTheme,
    tooltipStyles,
    cmCollab,
    TSWorker,
    codeiumCopilot,
    copilotStyle,
    EditorView,
    basicSetup
  };
};
function renderDisplayParts(dp) {
  const div = document.createElement("div");
  for (const part of dp) {
    const span = div.appendChild(document.createElement("span"));
    span.className = `quick-info-${part.kind}`;
    span.innerText = part.text;
  }
  return div;
}
function TypeScriptEditor({ value, url = "ws://localhost:1234", room = "default", component = "codemirror" }) {
  const host = useHost();
  const [_, setValue] = useProp("value");
  const editorRef = useRef();
  const deps = useDeps();
  useEffect(() => {
    let editor;
    const initializeEditor = async () => {
      if (!deps) return;
      const path = "index.ts";
      const innerWorker = new deps.TSWorker({
        name: "ts-editor-worker"
      });
      const worker = deps.Comlink.wrap(innerWorker);
      await worker.initialize();
      const { doc, awareness } = connect(url, room);
      const text = doc.getText(component);
      editor = new deps.EditorView({
        extensions: [
          deps.basicSetup,
          deps.editorTheme,
          deps.javascript({
            typescript: true,
            jsx: true
          }),
          deps.tsFacetWorker.of({ worker, path }),
          deps.tsSyncWorker(),
          deps.tsLinterWorker(),
          deps.autocompletion({
            override: [
              deps.tsAutocompleteWorker({
                renderAutocomplete: (raw) => {
                  return () => {
                    const div = document.createElement("div");
                    div.classList.add("cm-tooltip");
                    if (raw.displayParts) {
                      const signature = div.appendChild(document.createElement("div"));
                      signature.className = "quick-info-signature";
                      signature.appendChild(renderDisplayParts(raw.displayParts));
                    }
                    if (raw.documentation) {
                      const docs = div.appendChild(document.createElement("div"));
                      docs.className = "quick-info-documentation";
                      docs.appendChild(renderDisplayParts(raw.documentation));
                    }
                    return { dom: div };
                  };
                }
              })
            ]
          }),
          deps.tsHoverWorker(),
          deps.tsGotoWorker(),
          deps.cmCollab({
            awareness,
            component: text
          }),
          deps.codeiumCopilot()
        ],
        parent: host.current,
        root: host.current.shadowRoot || void 0
      });
      editorRef.current = editor;
      editor.dom.addEventListener("change", () => {
        const newValue = editor.state.doc.toString();
        setValue(newValue);
        host.current?.dispatchEvent(
          new CustomEvent("change", {
            detail: newValue,
            bubbles: true,
            composed: true
          })
        );
      });
      host.current?.dispatchEvent(
        new CustomEvent("cm:ts:ready", {
          detail: editor,
          bubbles: true,
          composed: true
        })
      );
      if (value) {
        editor.dispatch({
          changes: {
            from: 0,
            to: editor.state.doc.length,
            insert: value
          }
        });
      }
    };
    initializeEditor();
    return () => {
      if (editorRef.current) {
        editorRef.current.destroy();
      }
    };
  }, [deps]);
  useEffect(() => {
    if (editorRef.current && value !== void 0 && value !== editorRef.current.state.doc.toString()) {
      editorRef.current.dispatch({
        changes: {
          from: 0,
          to: editorRef.current.state.doc.length,
          insert: value
        }
      });
    }
  }, [value]);
  return /* @__PURE__ */ jsxs("host", { children: [
    /* @__PURE__ */ jsxs("style", { children: [
      "$",
      deps?.containerStyles + deps?.tooltipStyles + deps?.copilotStyle
    ] }),
    /* @__PURE__ */ jsx("div", { autofocus: true, class: "codemirror-host cm-s-twilight border-2   ", children: h(editorRef.current?.dom, {}) })
  ] });
}
TypeScriptEditor.props = {
  value: String,
  url: String,
  room: String,
  component: String
};
TypeScriptEditor.styles = css`:host{display:block;width:100%;height:100%}#editor{height:100%;width:100%}`;
const TsEditor = c(TypeScriptEditor);
function useDeps() {
  const [deps, setDeps] = useState();
  useEffect(() => {
    loadDependencies().then((deps2) => {
      setDeps(deps2);
    });
  }, []);
  return deps;
}
customElements && customElements.define("ts-editor", TsEditor);
TsEditor.export = "TsEditor";

export { TsEditor };
