class ImageHiglighter {
  imageHighlighter;
  constructor(id) {
    this.imageHighlighter = document.getElementById(id);
    this.imageHighlightCallback = this.imageHighlightCallback.bind(this);

    var styleElement = document.createElement("link");
    styleElement.rel = "stylesheet";
    styleElement.href = "css/imageHighlighter.css";

    document.head.appendChild(styleElement);

    this.imageHighlighter.onclick = () => {
      this.imageHighlighter.childNodes.forEach((child) => {
        child.classList.add("remove");
        setTimeout(() => {
          this.imageHighlighter.removeChild(child);
        }, 100);
      });
    };
  }

  imageHighlightCallback(highlightEvent) {
    var bigImg = document.createElement("img");
    bigImg.onclick = (imageClickEvent) => {
      // This prevents the highlighter's onClick from closing the image when clicking
      // on the image instead of next to it.
      imageClickEvent.preventDefault();
      imageClickEvent.stopPropagation();
    };
    bigImg.src = highlightEvent.target.src;
    this.imageHighlighter.appendChild(bigImg);
  }

  setActions() {
    // not needed in this case
  }

  adapt(div) {
    const img = div.querySelector(".page-image");
    img.addEventListener("click", this.imageHighlightCallback);
    return div;
  }
}

export default ImageHiglighter;