require([
  "esri/Map",
  "esri/Basemap",
  "esri/views/MapView",
  "esri/geometry/SpatialReference",
  "esri/layers/WMTSLayer",
  "esri/layers/FeatureLayer",
  "esri/widgets/FeatureTable",
  "esri/layers/support/TileInfo",
  "esri/widgets/Popup",
  "esri/Graphic",
  "esri/geometry/Point"
], function (
  Map,
  Basemap,
  MapView,
  SpatialReference,
  WMTSLayer,
  FeatureLayer,
  FeatureTable,
  TileInfo,
  Popup,
  Graphic,
  Point
) {
  let basket = []; // array of selected features
  let newStreetlights = []; // array of any new streetlights created in this session

  const map = new Map({
    basemap: {
      baseLayers: [
        new WMTSLayer({
          url:
            "https://tile.publicsectormapping.gov.scot/osmao-dumfg-alc10-f1154/m0105/wmts?",
          serviceMode: "KVP"
        })
      ]
    }
  });

  const spatialReference = new SpatialReference({
    wkid: 27700
  });

  const streetlightPopup = {
    title: "Streetlight {column_no_}",
    content: '<div class="popup-content">{location}<br>{town}<br>{area}</div>',
    includeDefaultActions: false,
    maxInlineActions: 0,
    dockEnabled: false,
    spinnerEndabled: true
  };

  const missingStreetlightPopup = new Popup({
    autoOpenEnabled: false,
    title: "Missing streetlight?",
    content: "Add a streetlight at this location?",
    includeDefaultActions: false,
    dockEnabled: false,
    spinnerEndabled: true,
    actions: [
      {
        title: "Add Streetlight",
        id: "add-streetlight",
        image:
          "https://info.dumgal.gov.uk/CustomerPortal/Resources/images/streetlight.png"
      }
    ]
  });

  missingStreetlightPopup.on("trigger-action", (event) => {
    if (event.action.id === "add-streetlight") {
      createFeature();
    }
  });

  const streetlightRenderer = {
    type: "simple",
    symbol: {
      type: "simple-marker",
      size: "20px",
      color: "yellow",
      outline: {
        color: [93, 40, 95],
        width: 3
      }
    }
  };

  var selectionSymbol = {
    type: "simple-fill",
    color: [255, 0, 0, 0.5],
    outline: {
      color: [255, 0, 0, 1]
    }
  };

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 20,
    center: {
      x: 297308,
      y: 575886,
      spatialReference: spatialReference
    },
    highlightOptions: {
      color: [255, 58, 58],
      fillOpacity: 0.4
    },
    spatialReference: spatialReference,
    constraints: {
      lods: TileInfo.create({
        spatialReference: spatialReference
      }).lods
    },
    popup: missingStreetlightPopup
  });

  view.popup.viewModel.includeDefaultActions = false;

  const streetlightsLayer = new FeatureLayer({
    url:
      "https://services-eu1.arcgis.com/VLS4YRHk16QbZQBX/arcgis/rest/services/streetlights_copy_edit/FeatureServer",
    renderer: streetlightRenderer,
    outFields: [
      "column_no_",
      "location",
      "road",
      "town",
      "area",
      "easting",
      "northing",
      "locality"
    ],
    id: "streetlight",
    popupTemplate: streetlightPopup,
    opacity: 1,
    minScale: 3000
  });

  streetlightsLayer.selectionSymbol = selectionSymbol;

  let streetlightsLayerView;
  view.whenLayerView(streetlightsLayer).then((layerView) => {
    streetlightsLayerView = layerView;
  });

  map.add(streetlightsLayer);

  const featureTable = new FeatureTable({
    view: view,
    layer: streetlightsLayer,
    visibleElements: {
      menuItems: {
        clearSelection: true,
        refreshData: true,
        toggleColumns: true,
        selectedRecordsShowAllToggle: true,
        selectedRecordsShowSelectedToggle: true,
        zoomToSelection: false
      }
    },
    tableTemplate: {
      columnTemplates: [
        {
          type: "field",
          fieldName: "column_no_",
          label: "Column No",
          direction: "asc"
        },
        {
          type: "field",
          fieldName: "location",
          label: "Location"
        },
        {
          type: "field",
          fieldName: "road",
          label: "Road"
        }
      ]
    },
    container: document.getElementById("tableDiv")
  });

  view.on("immediate-click", (event) => {
    if (view.popup) {
      view.popup.close(); // just in case it's already open
    }

    view.hitTest(event).then((response) => {
      // have we clicked on a streetlight object?
      if (response.results.length === 0) {
        console.log("no streetlight hit");

        if (!view.popup) {
          console.log("view.popup is null");
          missingStreetlightPopup.location = event.mapPoint;
          view.popup = missingStreetlightPopup;
        } else {
          console.log("popup only displays briefly!");
          view.popup.open({
            location: event.mapPoint
          });
        }
      } else {
        console.log("streetlight hit");

        const candidate = response.results.map((result) => {
          return result.graphic;
        });

        var alreadySelected = basket.find((item) => {
          return item.objectId === candidate[0].attributes.FID;
        });

        if (alreadySelected) {
          console.log("removing streetlight from basket");

          var newlyCreatedFeature = newStreetlights.find((item) => {
            return item.objectId === candidate[0].attributes.FID;
          });

          if (newlyCreatedFeature) {
            deleteFeature(newlyCreatedFeature);
            featureTable.deselectRows(candidate);
          } else {
            view.popup = null; // stop the popup
            featureTable.deselectRows(candidate);
          }
        } else {
          console.log("adding streetlight to basket");
          streetlightPopup.location = candidate.mapPoint;
          view.popup = streetlightPopup;
          featureTable.selectRows(candidate);
        }
      }
    });
  });

  featureTable.on("selection-change", (changes) => {
    changes.removed.forEach((item) => {
      const data = basket.find((data) => {
        return data.objectId === item.objectId;
      });
      if (data) {
        basket.splice(basket.indexOf(data), 1);
      }
    });

    changes.added.forEach((item) => {
      basket.push({
        objectId: item.objectId,
        feature: item.feature
      });
    });

    featureTable.filterBySelection();
  });

  function deleteFeature(point) {
    console.log("ToDo - removeFeature", point.x, point.y);
  }

  async function GetPointInfo(x, y) {
    return new Object({
      ColumnNumber: new Date().toISOString(),
      StreetName: "ToDo Road Name",
      StreetNumber: "ToDo Road Number",
      Town: "ToDo Town",
      Area: "ToDo Area"
    });
  }

  function createFeature() {
    const point = view.popup.location;

    GetPointInfo(point.x, point.y).then((pointInfo) => {
      graphic = new Graphic({
        geometry: point,
        attributes: {
          column_no_: pointInfo.ColumnNumber,
          location: pointInfo.StreetName,
          road: pointInfo.StreetNumber,
          town: pointInfo.Town,
          area: pointInfo.Area,
          easting: point.x,
          northing: point.y
        }
      });

      streetlightsLayer
        .applyEdits({
          addFeatures: [graphic]
        })
        .then((results) => {
          console.log("feature added", results);

          // How do I select this feature on the map and/or the featureTable

          //featureTable.selectRows(graphic);             // nope!
          //view.highlight(results.addFeatureResults[0]); // nope!
          const where = `${streetlightsLayer.objectIdField} = ${results.addFeatureResults[0].objectId}`;
          let query = streetlightsLayer.createQuery();
          query.where = where;
          query.outFields = ["*"];
          streetlightsLayer.queryFeatures(query).then((results) => {
            console.log("query results", results.features);
            featureTable.selectRows(results.features[0]);
          });

          newStreetlights.push({
            objectId: results.addFeatureResults[0].objectId,
            feature: results.features[0]
          });

          featureTable.refresh(); // needed?
        })
        .catch((error) => {
          console.error(error);
        });
    });
  }
});