require([
  "esri/WebMap",
  "esri/views/MapView",
  "esri/widgets/Legend",
  "esri/core/watchUtils"
], function(WebMap, MapView, Legend, watchUtils) {
  const webmap = new WebMap({
    portalItem: {
      id: "79cce2e1be8e451f8883fde8d964429c"
    }
  });

  const view = new MapView({
    map: webmap,
    container: "viewDiv"
  });

  const legend = new Legend({
    view
  });

  view.ui.add(legend, "bottom-left");
  // the button that triggers area selection mode
  const screenshotBtn = document.getElementById("screenshotBtn");

  // the orange mask used to select the area
  const maskDiv = document.getElementById("maskDiv");

  // element where we display the print preview
  const screenshotDiv = document.getElementById("screenshotDiv");

  view.ui.add(screenshotBtn, "top-left");

  // add an event listener to trigger the area selection mode
  screenshotBtn.addEventListener("click", () => {
    view.popup.dockEnabled = true;
    screenshotBtn.classList.add("active");
    view.container.classList.add("screenshotCursor");
    let area = null;

    // listen for drag events and compute the selected area
    const dragHandler = view.on("drag", event => {
      // prevent navigation in the view
      event.stopPropagation();

      // when the user starts dragging or is dragging
      if (event.action !== "end") {
        // calculate the extent of the area selected by dragging the cursor
        const xmin = clamp(Math.min(event.origin.x, event.x), 0, view.width);
        const xmax = clamp(Math.max(event.origin.x, event.x), 0, view.width);
        const ymin = clamp(Math.min(event.origin.y, event.y), 0, view.height);
        const ymax = clamp(Math.max(event.origin.y, event.y), 0, view.height);
        area = {
          x: xmin,
          y: ymin,
          width: xmax - xmin,
          height: ymax - ymin
        };
        // set the position of the div element that marks the selected area
        setMaskPosition(area);
      }
      // when the user stops dragging
      else {
        // remove the drag event listener from the view
        dragHandler.remove();
        // the screenshot of the selected area is taken
        view
          .takeScreenshot({
            area,
            format: "png"
          })
          .then(screenshot => {
            const viewCanvas = document.createElement("canvas");
            const img = document.createElement("img");

            html2canvas(document.querySelector(".esri-legend")).then(
              legendCanvas => {
                document
                  .querySelector(".esri-popup__header-buttons")
                  .setAttribute("data-html2canvas-ignore", "true");
                document
                  .querySelector(".esri-popup__footer")
                  .setAttribute("data-html2canvas-ignore", "true");
                html2canvas(
                  document.querySelector(".esri-popup__main-container"),
                  {
                    height:
                      document.querySelector(".esri-feature__content-element")
                        .scrollHeight + 50
                  }
                ).then(popUpCanvas => {
                  console.dir(document.querySelector(".esri-widget__table"));
                  viewCanvas.height = screenshot.data.height;
                  viewCanvas.width = screenshot.data.width;
                  const context = viewCanvas.getContext("2d");
                  img.src = screenshot.dataUrl;
                  img.onload = function() {
                    context.drawImage(img, 0, 0);
                    const viewLegendPopupCanvas = document.createElement(
                      "canvas"
                    );
                    const combinedCanvasContext = viewLegendPopupCanvas.getContext(
                      "2d"
                    );
                    const viewScreenshotHeight = screenshot.data.height;
                    const legendCanvasHeight = legendCanvas.height;
                    const popUpCanvasHeight = popUpCanvas.height;
                    viewLegendPopupCanvas.width =
                      screenshot.data.width +
                      legendCanvas.width +
                      popUpCanvas.width;
                    const height =
                      viewScreenshotHeight > legendCanvasHeight &&
                      viewScreenshotHeight > popUpCanvasHeight
                        ? viewScreenshotHeight
                        : legendCanvasHeight > viewScreenshotHeight &&
                          legendCanvasHeight > popUpCanvasHeight
                        ? legendCanvasHeight
                        : popUpCanvasHeight > legendCanvasHeight &&
                          popUpCanvasHeight > viewScreenshotHeight
                        ? popUpCanvasHeight
                        : null;
                    viewLegendPopupCanvas.height = height;
                    combinedCanvasContext.drawImage(legendCanvas, 0, 0);
                    combinedCanvasContext.drawImage(
                      viewCanvas,
                      legendCanvas.width,
                      0
                    );
                    combinedCanvasContext.drawImage(
                      popUpCanvas,
                      screenshot.data.width + legendCanvas.width,
                      0
                    );
                    showPreview(viewLegendPopupCanvas);
                    downloadButton(viewLegendPopupCanvas);
                  };
                });
              }
            );
            // the screenshot mode is disabled
            screenshotBtn.classList.remove("active");
            view.container.classList.remove("screenshotCursor");
            setMaskPosition(null);
          });
      }
    });

    function setMaskPosition(area) {
      if (area) {
        maskDiv.classList.remove("hide");
        maskDiv.style.left = area.x + "px";
        maskDiv.style.top = area.y + "px";
        maskDiv.style.width = area.width + "px";
        maskDiv.style.height = area.height + "px";
      } else {
        maskDiv.classList.add("hide");
      }
    }

    function clamp(value, from, to) {
      return value < from ? from : value > to ? to : value;
    }

    function downloadButton(canvasElement) {
      const downloadBtn = document.querySelector(".download-button");
      downloadBtn.onclick = function() {
        downloadImage(
          webmap.portalItem.title + ".png",
          canvasElement.toDataURL()
        );
      };
    }

    function downloadImage(filename, dataUrl) {
      if (!window.navigator.msSaveOrOpenBlob) {
        const element = document.createElement("a");
        element.setAttribute("href", dataUrl);
        element.setAttribute("download", filename);
        element.style.display = "none";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      } else {
        const byteString = atob(dataUrl.split(",")[1]);
        const mimeString = dataUrl
          .split(",")[0]
          .split(":")[1]
          .split(";")[0];
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
        }
        const blob = new Blob([ab], { type: mimeString });
        window.navigator.msSaveOrOpenBlob(blob, filename);
      }
    }
  });

  // creates an image that will be appended to the DOM
  function showPreview(viewLegendPopupCanvas) {
    screenshotDiv.classList.remove("hide");
    // add the screenshot dataUrl as the src of an image element
    const screenshotImage = document.getElementsByClassName(
      "js-screenshot-image"
    )[0];
    screenshotImage.width = viewLegendPopupCanvas.width;
    screenshotImage.height = viewLegendPopupCanvas.height;
    screenshotImage.src = viewLegendPopupCanvas.toDataURL();
  }

  // button to hide the print preview html element
  document.getElementById("closeBtn").addEventListener("click", function() {
    view.popup.dockEnabled = false;
    screenshotDiv.classList.add("hide");
  });

  watchPopup(view, screenshotBtn, watchUtils);
});

function watchPopup(view, screenshotBtn, watchUtils) {
  watchUtils.init(view.popup, "visible", () => {
    if (!view.popup.visible) {
      screenshotBtn.setAttribute("disabled", "true");
      screenshotBtn.innerText = "Select a feature...";
    } else {
      screenshotBtn.removeAttribute("disabled");
      screenshotBtn.innerText = "Take a screenshot";
    }
  });
}