const moveModal = (elmnt) => {
  console.log(elmnt);
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  document.body.addEventListener("mousedown", dragMouseDown, {
    passive: false,
  });

  function dragMouseDown(e) {
    console.log("dragMouseDown", e);
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.body.addEventListener("mouseup", closeDragElement, {
      passive: false,
    });
    // call a function whenever the cursor moves:
    document.body.addEventListener("mousemove", elementDrag, {
      passive: false,
    });
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.body.removeEventListener("mouseup", closeDragElement);
    document.body.removeEventListener("mousemove", elementDrag);
  }
};

export const draggable = {
  install(app) {
    app.directive("draggable", {
      mounted: (el, binding, vnode, prevVnode) => {
        console.log("draggable", $(`#${el.id}`).draggable);
        if (binding.value) {
          if ($(`#${el.id}`).draggable) {
            $(`#${el.id}`).draggable({
              cursor: "move",
              scroll: true,
              container: ".app-container",
            });
          } else {
            moveModal(el);
          }
        }
      },
    });
  },
};