require([
  "esri/config",
  "esri/views/MapView",
  "esri/views/SceneView",
  "esri/geometry/Point",
  "esri/geometry/SpatialReference",
  "esri/layers/GeoJSONLayer",
  "esri/geometry/geometryEngine",
  "esri/geometry/projection"
], (
  esriConfig,
  MapView,
  SceneView,
  Point,
  SpatialReference,
  GeoJSONLayer,
  geometryEngine,
  projectionEngine
) => {
  // esriConfig.apiKey = "%YOUR_API_KEY_PROD%";

  let spatialReference;
  let view2D;

  // All app colors
  const black = [0, 0, 0];
  const white = [255, 255, 255];
  const purple = [150, 130, 220];
  const mildPurple = [100, 70, 170];
  const graphite = [50, 50, 50];
  const red = [255, 0, 0];

  function addAlpha(color, alpha) {
    return [...color, alpha];
  }

  // Symbols and renderers constants
  const countriesRenderer = {
    type: "simple",
    symbol: {
      type: "simple-fill",
      color: addAlpha(white, 1),
      outline: {
        width: 0.5,
        color: addAlpha(mildPurple, 0.75)
      }
    }
  };

  const projectionBoundary = {
    symbol: {
      type: "simple-fill",
      color: null,
      outline: {
        width: 0.5,
        color: addAlpha(graphite, 0.75),
        style: "dash"
      }
    },
    geometry: {
      type: "extent",
      xmin: -180,
      xmax: 180,
      ymin: -90,
      ymax: 90,
      spatialReference: SpatialReference.WGS84
    }
  };

  const bufferSym = {
    type: "simple-fill", // autocasts as new SimpleFillSymbol()
    color: addAlpha(purple, 0.85),
    outline: {
      color: addAlpha(black, 0.5),
      width: 0.5
    }
  };

  const pointSym = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    color: red,
    outline: {
      color: white,
      width: 0.5
    },
    size: 5
  };

  // Spatial reference select
  const wkidSelect = document.getElementById("wkid");

  // Set spatial reference
  spatialReference = getSpatialReference(wkidSelect.value);

  // Update spatial reference
  wkidSelect.addEventListener("change", (event) => {
    spatialReference = getSpatialReference(event.target.value);
    createViewWithSpatialReference();
  });

  // Center for the map
  let center = {
    latitude: 30,
    longitude: -10,
    spatialReference: {
      wkid: 4326
    }
  };

  const view3D = new SceneView({
    container: "sceneDiv",
    map: {
      basemap: "satellite"
    },
    alphaCompositingEnabled: true,
    camera: {
      position: {
        x: center.longitude,
        y: center.latitude,
        z: 15294210 // elevation in meters
      },
      heading: 0
    },
    padding: {
      bottom: 30,
      right: 20
    },
    constraints: {
      altitude: {
        min: 15294210,
        max: 15294210
      }
    },
    environment: {
      atmosphereEnabled: false,
      lighting: {
        directShadowsEnabled: false,
        date: new Date("null")
      },
      background: {
        type: "color",
        color: [0, 0, 0, 0]
      },
      atmosphereEnabled: false,
      starsEnabled: false
    },

    ui: {
      components: []
    }
  });

  // Display the layers when the app loads
  createViewWithSpatialReference();

  // Create view with spatial reference
  async function createViewWithSpatialReference() {
    // Load the projection engine
    await projectionEngine.load();

    // Project the center point
    center = projectionEngine.project(new Point(center), spatialReference);

    // Destroy old view
    if (view2D) {
      view2D.map = null;
      view2D.destroy();
    }

    // Create new view with spatial reference
    view2D = new MapView({
      container: "mapDiv",
      map: {
        layers: [
          new GeoJSONLayer({
            url: "https://assets.codepen.io/2969649/countries.json",
            copyright: "Esri",
            spatialReference: {
              wkid: 4326
            },
            renderer: countriesRenderer
          })
        ]
      },
      spatialReference: spatialReference,
      center: center,
      scale: 150000000
    });

    // Add gray boundary over the 2D projection
    view2D.graphics.add(projectionBoundary);

    view2D.ui.add(wkidSelect, "top-right");

    view2D.on("pointer-move", (event) => {
      createBuffer(event, view2D);
    });

    view3D.on("pointer-move", (event) => {
      createBuffer(event, view3D);
    });

    view2D.on("click", (event) => {
      bufferPoint(event.mapPoint);
    });

    view3D.on("click", (event) => {
      bufferPoint(event.mapPoint);
    });

    function createBuffer(event, view) {
      // let point = view.toMap({
      //   x: event.x,
      //   y: event.y
      // });

      let type = view.type;
      let x = event.x;
      let y = event.y;
      let point = view.toMap(event);

      if (point) {
        event.stopPropagation();
        bufferPoint(point, view);
      }
    }

    function bufferPoint(point, view) {
      if (!point) {
        return;
      }

      if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) {
        point = projectionEngine.project(point, getSpatialReference(4326));
        if (!point) {
          // console.warn("We couldn't project -> ", {point})
          return;
        }
      }

      point.hasZ = false;
      point.z = undefined;

      const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers");

      if (point && buffer) {
        // Avoid removing the map projection boundary
        view2D.graphics.removeMany([
          view2D.graphics.getItemAt(1),
          view2D.graphics.getItemAt(2)
        ]);

        view3D.graphics.removeAll();

        const bufferGraphic = {
          geometry: buffer,
          symbol: bufferSym
        };

        view2D.graphics.addMany([
          bufferGraphic,
          {
            geometry: point,
            symbol: pointSym
          }
        ]);

        view3D.graphics.addMany([
          {
            geometry: point,
            symbol: {
              ...pointSym,
              size: 4
            }
          },
          bufferGraphic
        ]);

        if (view && view.type === "2d") {
          //zoom 3D
          view3D.goTo({
            position: {
              x: point.longitude,
              y: point.latitude,
              z: 15294210 // elevation in meters
            },
            heading: 0
          });
        }
      }
    }
  }

  function getSpatialReference(wkid) {
    return new SpatialReference({
      wkid: wkid
    });
  }
});