require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/Graphic",
  "esri/symbols/SimpleFillSymbol",
  "esri/rest/support/Query"
], (Map, MapView, FeatureLayer, Graphic, SimpleFillSymbol, Query) => {

  const whereClause = "NO_FARMS87 > 500";

  const map = new Map({
    basemap: "dark-gray-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 7,
    center: [-78, 41]
  });

  const listNode = document.getElementById("list_counties");
  
  const popupInfo = {
    title: "{NAME} County",
    content: "<b> Farms: {NO_FARMS87} </b>"
  }
  
  const counties = new FeatureLayer({
    portalItem: {
      id: "0875e77a2ff54dd689e169d7798d0905"
    },
    popupTemplate: popupInfo
  });
  
  map.add(counties);
  
  view.when(function() {
    const farmQuery = new Query({
      where: whereClause,
      returnGeometry: true,
      outFields: ["NAME", "NO_FARMS87"],
      orderByFields: ["NAME"],
      outSpatialReference: view.map.basemap.baseLayers.items[0].spatialReference
    });    
    counties.queryFeatures(farmQuery).then(displayResults);
  });
  
  const graphics = [];
  
  function displayResults(results) {
    const fragment = document.createDocumentFragment();
    
    results.features.forEach(function(county, index) {
      county.popupTemplate = popupInfo;
      
      graphics.push(county);
      
      const attributes = county.attributes;
      const name = attributes.NAME + " (" +
        attributes.NO_FARMS87 + ")";
        
      const li = document.createElement("li");
      li.classList.add("panel-result");
      li.tabIndex = 0;
      li.setAttribute("data-result-id", index);
      li.textContent = name;

      fragment.appendChild(li);
    });

    listNode.innerHTML = "";
    listNode.appendChild(fragment);    
    
    const selLayer = new FeatureLayer({
      source: graphics,
      fields: counties.fields,
      objectIdField: "FID",
      renderer: {
        type: "simple",
        symbol: {
          type: "simple-fill", 
          color: "yellow"
        }
      }
    });
    map.add(selLayer);
  }  

  listNode.addEventListener("click", onListClickHandler);

  function onListClickHandler(event) {   
    const target = event.target;
    const resultId = target.getAttribute("data-result-id");

    const result = resultId && graphics && graphics[parseInt(resultId,
      10)];

    if (result) {
      view.popup.open({
        features: [result],
        location: result.geometry.centroid
      });
    }
  }
});