require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/widgets/Slider",
  "esri/core/watchUtils"
], function(ArcGISMap, MapView, FeatureLayer, Slider, { whenFalseOnce }) {
  const label = document.getElementById("pct-unemployment");
  const layer = new FeatureLayer({
    url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/BLS_Monthly_Unemployment_Current_14_Months/FeatureServer/2",
    minScale: 0,
    maxScale: 0
  });
  const map = new ArcGISMap({
    basemap: "dark-gray-vector",
    layers: [layer]
  });
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-100, 40],
    zoom: 3
  });
  
  const slider = new Slider({
    container: "slider",
    min: 0,
    max: 25,
    values: [0],
    steps: 0.5
  });
  // PctUnemployed_CurrentMonth
  view.whenLayerView(layer).then(async (layerView) => {
    await whenFalseOnce(layerView, "updating");
    slider.on("thumb-drag", ({ value }) => {
      console.log(value)
      label.innerText = `${value}%`;
      if (value > 0) {
        layerView.effect = {
          filter: {
            where: `PctUnemployed_CurrentMonth < ${value}`
          },
          includedEffect: "bloom(20%) drop-shadow(2px, 2px, 2px)",
          excludedEffect: "blur(7px)"
        };
      }
      else {
        layerView.effect = null;
      }
    });
  });
  
});