import { 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 { Doc } from './node_modules/.pnpm/yjs@13.6.26/node_modules/yjs/dist/yjs.js';
import { HocuspocusProvider } from './node_modules/.pnpm/@hocuspocus_provider@2.15.2_y-protocols@1.0.6_yjs@13.6.26__yjs@13.6.26/node_modules/@hocuspocus/provider/dist/hocuspocus-provider.esm.js';
import { useProp } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/custom-hooks/use-prop.js';
import { useRef } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/create-hooks.js';
import { useEffect } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/hooks/use-effect.js';
import { c } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/element/custom-element.js';
import { css } from './node_modules/.pnpm/atomico@1.79.2/node_modules/atomico/src/css.js';

function YjsTextInput({ url = "ws://localhost:1234", room = "default", component = "codemirror", required = false }) {
  const [value, setValue] = useProp("value");
  const [_, setValidity] = useProp("validity");
  const yDocRef = useRef(new Doc({ guid: room }));
  const yTextRef = useRef(yDocRef.current.getText(component));
  useEffect(() => {
    const provider = new HocuspocusProvider({
      url,
      name: room,
      document: yDocRef.current,
      connect: true,
      broadcast: true,
      forceSyncInterval: 1e3,
      onConnect: () => {
        console.log("connected to", url, room);
      }
    });
    return () => provider.destroy();
  }, [yDocRef.current]);
  useEffect(() => {
    setValue(yTextRef.current.toJSON());
    const handler = (event) => {
      const newValue = event.target.toJSON();
      setValue(newValue);
      validate(newValue);
    };
    yTextRef.current.observe(handler);
    return () => {
      yTextRef.current.unobserve(handler);
    };
  }, [yTextRef.current]);
  function validate(val = value) {
    if (required && !val) {
      setValidity(
        { valueMissing: true, message: "This field is required" }
      );
    } else {
      setValidity({});
    }
  }
  return /* @__PURE__ */ jsx("host", { children: /* @__PURE__ */ jsx("slot", {}) });
}
YjsTextInput.props = {
  value: {
    type: String,
    event: {
      type: "change",
      bubbles: true,
      composed: true
    }
  },
  url: {
    type: String,
    default: "ws://localhost:1234"
  },
  room: {
    type: String,
    required: false
  },
  component: {
    type: String,
    default: "codemirror"
  },
  required: {
    type: Boolean,
    required: false
  },
  validity: {
    type: Object,
    default: {
      message: ""
    },
    event: {
      type: "validitychange",
      bubbles: true,
      composed: true
    }
  }
};
const yjsTextInput = c(YjsTextInput, {
  props: YjsTextInput.props,
  base: class extends HTMLElement {
    static formAssociated = true;
    internals;
    constructor() {
      super();
      this.internals = this.attachInternals();
      this.addEventListener("change", (e) => {
        if (e.target && "value" in e.target && typeof e.target.value === "string") {
          this.internals.setFormValue(e.target.value);
        }
      });
    }
  },
  styles: css`:host{display:none}`
});
customElements && customElements.define("yjs-text-input", yjsTextInput);
yjsTextInput.export = "yjsTextInput";

export { YjsTextInput, yjsTextInput as default, yjsTextInput };
