import * as Y from "yjs";

export function PollTitle(ydoc: Y.Doc, yTitle: Y.Text): HTMLElement {
  const wrapper = document.createElement("div");
  wrapper.className = "poll-title-wrapper";

  const input = document.createElement("input");
  input.type = "text";
  input.id = "poll-title";
  input.className = "poll-title-input";
  input.placeholder = "Untitled Poll";
  input.maxLength = 120;
  input.setAttribute("aria-label", "Poll title");
  input.value = yTitle.toString();

  wrapper.appendChild(input);

  // Sync from Yjs → input (only when not focused to avoid cursor jump)
  yTitle.observe(() => {
    if (document.activeElement !== input) {
      input.value = yTitle.toString();
    }
  });

  // Sync from input → Yjs
  input.addEventListener("input", () => {
    ydoc.transact(() => {
      yTitle.delete(0, yTitle.length);
      yTitle.insert(0, input.value);
    });
  });

  return wrapper;
}