Dialogs

var state = {
    isDragging: false,
    isHidden: true,
    mouseX:0,
    mouseY:0,
    xDiff: 0,
    yDiff: 0,
    x: 0,
    y: 0,

};
const openDialog = document.getElementById("openDialog");
const openModal = document.getElementById("openModal");
const dialogbox = document.getElementById("dialogbox");

function openCheck(dialogbox) {
  if (dialogbox.open) {
    openDialog.style.visibility = "hidden";
    openModal.style.visibility = "hidden";
    state.isHidden = false
  } else {
    openDialog.style.visibility = "visible";
    openModal.style.visibility = "visible";
    state.isHidden = true
  }
}

if(openDialog){    
openDialog.addEventListener("click", () => {
    dialogbox.show();
  openCheck(dialogbox);
});
}

if(openModal){
openModal.addEventListener("click", () => {
    dialogbox.showModal();
    openCheck(dialogbox);
  });
}

if(dialogbox){
dialogbox.addEventListener("close", () => {
  openCheck(dialogbox);
});

dialogbox.addEventListener("click", (e) => {
  const dialogDimensions = dialogbox.getBoundingClientRect()
  if (
    e.clientX < dialogDimensions.left ||
    e.clientX > dialogDimensions.right ||
    e.clientY < dialogDimensions.top ||
    e.clientY > dialogDimensions.bottom
  ) {
      dialogbox.close()
  }
})
}
renderWindow(dialogbox, state);

let dragArea = document.querySelector('legend');
if(dragArea){
dragArea.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
function renderWindow(dialogbox, myState) { 
  if(dialogbox){
  if (state.isHidden) {
      dialogbox.setAttribute('draggable', true)
  } else {
      dialogbox.setAttribute('draggable', false)
  }

  openCheck(dialogbox)

  
  if(myState.mouseX > 1 || myState.mouseX < window.innerWidth && myState.mouseY > 1 || myState.mouseY < window.innerHeight){
    dialogbox.style.transform = 'translate(' + myState.x + 'px, ' + myState.y + 'px)';
  }
  
  if(myState.mouseX <= 1  || myState.mouseX >= window.innerWidth){
    
    dialogbox.setAttribute('draggable', false);
    state.isDragging = false;
    document.body.style.overflow = "hidden";
  }else if(myState.mouseY < 0  || myState.mouseY >= window.innerHeight){
    
    dialogbox.setAttribute('draggable', false);
    state.isDragging = false;
    document.body.style.overflow = "hidden";
  }

}

}


function onMouseMove(e) {
  if (state.isDragging) {
    document.body.style.overflow = "hidden"
    
    state.x = e.clientX - state.xDiff;
    state.y = e.clientY - state.yDiff;
    state.mouseX = e.clientX;
    state.mouseY = e.clientY;
  }

  
  var dialogbox = document.getElementById('dialogbox');
  renderWindow(dialogbox, state);
}

function onMouseDown(e) {
  state.isDragging = true;
  state.xDiff = e.pageX - state.x;
  state.yDiff = e.pageY - state.y;
}

function onMouseUp() {
  document.body.style.overflow = "auto"
  state.isDragging = false;
}