export function addZoomButtons(map) {
  // Zoom buttons
  const plus = map.kp.loadSprite(null, "/assets/images/plus.png", {
    sliceX: 2,
  });

  const minus = map.kp.loadSprite(null, "/assets/images/minus.png", {
    sliceX: 2,
  });

  const zoomIn = map.kp.make([
    map.kp.sprite(plus),
    map.kp.pos(16),
    map.kp.scale(2),
    map.kp.area(),
    map.kp.opacity(1),
    "ui",
  ]);
  const zoomOut = map.kp.make([
    map.kp.sprite(minus),
    map.kp.pos(16, 42),
    map.kp.scale(2),
    map.kp.area(),
    map.kp.opacity(1),
    "ui",
  ]);

  let ziw;
  zoomIn.onClick(() => {
    map.mouseMode = "ui";
    map.zoomLevel += 1;
    zoomIn.frame = 1;
    if (ziw?.finish) ziw.finish();
    ziw = map.kp.wait(0.25, () => (zoomIn.frame = 0));

    map.clearMouseMode();
  });

  zoomIn.onUpdate(() => {
    zoomIn.opacity = map.zoomLevelLimit > 0 ? 0.25 : 1;
  });

  let zow;
  zoomOut.onClick(() => {
    map.mouseMode = "ui";
    map.zoomLevel -= 1;
    zoomOut.frame = 1;
    if (zow?.finish) zow.finish();
    zow = map.kp.wait(0.25, () => (zoomOut.frame = 0));

    map.clearMouseMode();
  });

  zoomOut.onUpdate(() => {
    zoomOut.opacity = map.zoomLevelLimit < 0 ? 0.25 : 1;
  });

  map.uiLayer.add(zoomIn);
  map.uiLayer.add(zoomOut);
}