require(["esri/Map", "esri/views/MapView", "esri/Graphic"], function (
  EsriMap,
  MapView,
  Graphic
) {
  const map = new EsriMap({
    basemap: "streets-vector"
  });
  const view = new MapView({
    center: [-90, 34],
    scale: 50000000,
    container: "viewDiv",
    map: map
  });

  // First create a point geometry (this is the location of the Titanic)
  const point = {
    type: "point", // autocasts as new Point()
    longitude: -90,
    latitude: 41.73
  };

  // Create a symbol for drawing the point
  const markerSymbol = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    color: [226, 119, 40],
    outline: {
      // autocasts as new SimpleLineSymbol()
      color: [255, 255, 255],
      width: 2
    }
  };

  const selectSymbol = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    color: [226, 119, 40],
    outline: {
      // autocasts as new SimpleLineSymbol()
      style: "short-dot",
      color: [0, 255, 255],
      width: 1
    }
  };

  // Create a graphic and add the geometry and symbol to it
  const pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol
  });

  const stop = (evt) => evt.stopPropagation();

  const updateGraphic = (event, symbol = selectSymbol) => {
    pointGraphic.geometry = view.toMap(event);
    pointGraphic.symbol = symbol;
  };

  const cleanUp = (event) => {
    console.log("done moving graphic");
    updateGraphic(event, markerSymbol);
    handlers.forEach((a) => a.remove());
    handlers.length = 0;
  };

  // Add the graphic to the view's graphics layer
  view.graphics.add(pointGraphic);

  const handlers = [];

  view.on("hold", ({ mapPoint }) => {
    view.hitTest(view.toScreen(mapPoint)).then((hitResult) => {
      if (!hitResult.results[0].graphic) return;
      console.log("hold event, now drag mouse to move graphic");
      pointGraphic.symbol = selectSymbol;
      const pausePan = view.on("drag", stop);
      const move = view.on("pointer-move", updateGraphic);
      const up = view.on("pointer-up", cleanUp);
      handlers.push(pausePan);
      handlers.push(move);
      handlers.push(up);
    });
  });
});