function clearEditState() {
  for (let e of document.querySelectorAll(".edit")) {
    e.classList.remove("edit");
  }
  toggleAbsenceEdit(false);
}

function clearButtonState() {
  for (let b of document.querySelectorAll(".change-button-component")) {
    b.type = "button";
  }
}

function editWorkday(element, event, id, isWorkDay) {
  event.preventDefault();
  let form = document.getElementById(id);
  if (form == null) {
    form = element.closest(".grid-sub").querySelector(".all-booking-component > form");
  }

  clearEditState();
  element.closest(".grid-sub").classList.add("edit");
  toggleAbsenceEdit(!isWorkDay);

  if (isWorkDay) {
    element.classList.add("edit");
    if (element.type == "button") {
      for (let input of form.querySelectorAll("input, select")) {
        input.disabled = false;
      }
      clearButtonState();
      element.type = "submit";
    } else {
      form.submit();
    }
  } else {
    const absenceForm = document.getElementById("absence_form");

    if (id == 0) {
      absenceForm.querySelector("[name=date_from]").value = form.id.replace("time-", "");
      absenceForm.querySelector("[name=date_to]").value = form.id.replace("time-", "");
    } else {
      syncFields(form, absenceForm, ["date_from", "date_to", "aw_type", "aw_id"]);
    }
  }
}

function toggleAbsenceEdit(state) {
  const form = document.getElementById("absence_form");
  if (state) {
    form.classList.remove("hidden");
    form.scrollIntoView({
      behavior: "smooth",
      block: "start",
      inline: "nearest",
    });
  } else {
    form.classList.add("hidden");
  }
}

function syncFields(from, to, fieldsToSync) {
  for (let field of fieldsToSync) {
    const src = from.querySelector(`[name=${field}]`);
    const target = to.querySelector(`[name=${field}]`);
    if (!src || !target) return;
    target.value = src.value;
  }
}

function navigateWeek(element, event, direction) {
  const dateInput = element.closest("form").querySelector("input[type=date]");
  const date = dateInput.valueAsDate;
  date.setDate(date.getDate() + 7 * direction);
  date.setHours(10);
  dateInput.valueAsDate = date;
}

function logoutUser() {
  fetch("/user/logout", {}).then(() => globalThis.location.reload());
}