const canvas = document.getElementById("c");
const c = canvas.getContext("2d");

const imageWidth = 100;
const imageHeight = 100;
const columns = Math.floor(canvas.width / imageWidth);
const totalImageCount = 100;

let scrollTop = 0;
let selectedIndex = -1;

function getMousePos(e) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top,
  };
}

function unselectImage() {
  selectedIndex = -1;
  canvas.removeEventListener("click", unselectImage);
  canvas.addEventListener("click", handleClick);
  render();
}

function handleClick(e) {
  const { x: mouseX, y: mouseY } = getMousePos(e);

  for (let i = 0; i < totalImageCount; i++) {
    const row = Math.floor(i / columns);
    const col = i % columns;

    const x = col * imageWidth;
    const y = row * imageHeight - scrollTop;

    if (
      mouseX >= x &&
      mouseX <= x + imageWidth &&
      mouseY >= y &&
      mouseY <= y + imageHeight
    ) {
      selectedIndex = i;
      canvas.removeEventListener("click", handleClick);
      canvas.addEventListener("click", unselectImage);
      render();
      return;
    }
  }
}

canvas.addEventListener("click", handleClick);

canvas.addEventListener("wheel", (e) => {
  scrollTop += e.deltaY;

  const rows = Math.ceil(totalImageCount / columns);
  const contentHeight = rows * imageHeight;

  const maxScroll = Math.max(0, contentHeight - canvas.height);

  scrollTop = Math.min(Math.max(scrollTop, 0), maxScroll);

  render();
});

const img = new Image();
img.src = "./images/1.jpg";
img.onload = () => render();

function render() {
  c.clearRect(0, 0, canvas.width, canvas.height);

  if (selectedIndex >= 0) {
    c.drawImage(img, 0, 0, canvas.width, canvas.height);
    return;
  }

  for (let i = 0; i < totalImageCount; i++) {
    const row = Math.floor(i / columns);
    const col = i % columns;

    const x = col * imageWidth;
    const y = row * imageHeight - scrollTop;

    c.drawImage(img, x, y, imageWidth, imageHeight);
  }
}