export function initializeProjects() {
  const tooltips = document.querySelectorAll(
    '[data-bs-toggle="tooltip"]',
  ) as NodeListOf<Element>;
  [...tooltips].forEach((element) => {
    //@ts-ignore
    new bootstrap.Tooltip(element);
    element.addEventListener(
      "click",
      () => (element as HTMLElement).blur(),
    );
  });

  const page = document.getElementById("page")!;
  const projectsButton = document.getElementById("projects-button")!;
  projectsButton.addEventListener("click", function () {
    projectsButton.blur();
    page.classList.toggle("side");
    if (!page.classList.contains("side")) {
      fade("projects-pane", 1, 0, 0.5);
    } else {
      fade("projects-pane", 0, 1, 0.5);
    }
  });
}

function fade(
  id: string,
  initialOpacity: number,
  finalOpacity: number,
  totalTime: number,
) {
  const element = document.getElementById(id);
  if (!element) {
    throw new Error("why");
  }
  if (initialOpacity == 0) {
    element.style.visibility = "visible";
    element.style.pointerEvents = "auto";
  } else {
    element.style.pointerEvents = "none";
    setTimeout(() => {
      element.style.visibility = "hidden";
    }, totalTime);
  }

  const currentTick = new Date().getTime();
  const elapsed = currentTick - totalTime;
  const newOpacity = initialOpacity +
    ((finalOpacity - initialOpacity) * elapsed) / totalTime;
  if (
    Math.abs(newOpacity - initialOpacity) >
      Math.abs(finalOpacity - initialOpacity)
  ) {
    element.style.opacity = finalOpacity.toString();
    return;
  }

  element.style.opacity = newOpacity.toString();
}