/**
 * Append one new span to the focused element and put the caret on the new line
 */
function newSpan(dataid, datavar, css, textContent) {
  const docFragment = document.createDocumentFragment();

  let newEle = document.createElement("span");
  newEle.innerHTML = "";
  newEle.setAttribute("data-id", dataid);
  newEle.setAttribute("data-var", datavar);
  newEle.classList.add(css);
  newEle.textContent = textContent;
  docFragment.appendChild(newEle);

  // make the br replace selection
  let range = window.getSelection().getRangeAt(0);
  range.deleteContents();
  range.insertNode(docFragment);

  // create a new range
  range = document.createRange();
  range.setStartAfter(newEle);
  range.collapse(true);

  // make the cursor there
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function newText() {
  move();

  const docFragment = document.createDocumentFragment();
  let newEle = document.createTextNode("\u00A0");
  docFragment.appendChild(newEle);

  // make the br replace selection
  let range = window.getSelection().getRangeAt(0);
  range.deleteContents();
  range.setStartAfter(range.endContainer);
  range.setEndAfter(range.endContainer);
  range.insertNode(docFragment);

  // create a new range
  range = document.createRange();
  range.setStartAfter(newEle);
  range.collapse(true);

  // make the cursor there
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function move() {
  let range = window.getSelection().getRangeAt(0);
  // create a new range
  range.setStartAfter(range.endContainer);
  range.collapse(true);

  // make the cursor there
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function moveBegin() {
  let range = window.getSelection().getRangeAt(0);
  range.setStartBefore(range.startContainer);
  let sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
}

function prepend() {
  let range = window.getSelection().getRangeAt(0);
  if (range.startOffset !== 0) {
    return newText();
  }
  moveBegin();
  // make the br replace selection
  range = window.getSelection().getRangeAt(0);
  range.deleteContents();
  range.setStartBefore(range.startContainer);

  const docFragment = document.createDocumentFragment();
  let newEle = document.createTextNode("\u00A0");
  docFragment.appendChild(newEle);
  range.insertNode(docFragment);

  // create a new range
  range = document.createRange();
  range.setStartBefore(newEle);
  range.collapse(true);

  // make the cursor there
  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  return true;
}

export { newSpan, newText, prepend };