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

function editWorkday(element, event, id, isWorkDay) {
  console.log("editWorkday called", isWorkDay);
  event.preventDefault();
  var 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.classList.contains("edit")) {
      form.querySelectorAll("input, select").forEach((input) => {
        input.disabled = false;
      });
    } else {
      form.submit();
    }
  } else {
    var absenceForm = document.getElementById("absence_form");

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

function toggleAbsenceEdit(state) {
  var 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) {
  fieldsToSync.forEach((name) => {
    const src = from.querySelector(`[name=${name}]`);
    const target = to.querySelector(`[name=${name}]`);
    if (!src || !target) return;
    target.value = src.value;
  });
}

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

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