require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/renderers/smartMapping/statistics/histogram",
  "esri/renderers/smartMapping/statistics/summaryStatistics",
  "esri/widgets/Histogram",
  "esri/Color",
  "esri/intl",
  "esri/widgets/Legend"
], function(
  Map,
  MapView,
  FeatureLayer,
  histogram,
  summaryStatistics,
  Histogram,
  Color,
  intl,
  Legend
) {

  // WIND_CHILL, TEMP, DEW_POINT, R_HUMIDITY, PRESSURE
  // HEAT_INDEX, LATITUDE, LONGITUDE
  const field = "LATITUDE";

  const layer = new FeatureLayer({
    url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/ArcGIS/rest/services/NOAA_METAR_current_wind_speed_direction_v1/FeatureServer/0",
    opacity: 1,
    renderer: {
      type: "simple",
      symbol: {
        type: "simple-marker",
        outline: {
          color: [153,153,153,0.25],
          width: 0.375
        },
        color: "gray",
        size: 4
      },
      visualVariables: [{
        type: "color",
        field: field,
        legendOptions: {
          title: "Latitude"
        },
        stops: [
          { value: -1, color: "#00ffc8", label: "< -45" },
          // { value: -22.5, color: "#1db695", label: "" },
          { value: 0, color: "#4a443d", label: "0" },
          // { value: 22.5, color: "#a06022", label: "" },
          { value: 1, color: "#ff7d00", label: "> 45" }
        ]
      }]
    },
    popupEnabled: false
  });

  const gridLayer = new FeatureLayer({ 
    portalItem: { id: "68f844f9efd04df6a4636e0f410ac072" }
  });

  const map = new Map({
    basemap: "dark-gray-vector",
    layers: [layer, gridLayer]
  });

  view = new MapView({
    container: "viewDiv",
    map: map,
    scale: 73957190.948944,
    center: [-44.91149910246385, 36.475324760262716],
    highlightOptions: {
      color: "black"
    }
  });

  view.ui.add("containerDiv", "bottom-left");

  let layerView = null;
  view.whenLayerView(layer)
    .then(function(lv){
      layerView = lv;
      return getAverage(field)
    })
    .then(function(average){
      return generateHistogram(field);
    })
    .catch(function(error){
      console.error(error);
    });


  let histogramChart;
  let histogramMinLabel = document.getElementById("minLabel");
  let histogramMaxLabel = document.getElementById("maxLabel");
  let histogramTitle = document.getElementById("title");

  function generateHistogram(fieldName, average){
    return histogram({
      layer: layer,
      field: fieldName,
      numBins: 100
    }).then(function(histogramResult){
      if(!histogramChart){
        histogramChart = Histogram.fromHistogramResult(histogramResult);
        histogramChart.container = "histogramDiv";
      } else {
        histogramChart.min = histogramResult.minValue;
        histogramChart.max = histogramResult.maxValue;
        histogramChart.bins = histogramResult.bins;
      }
      histogramChart.layout = "vertical";
      histogramChart.average = average;
      histogramChart.labelFormatFunction = formatValue;
      histogramChart.dataLines = [{
        value: 0,
        label: "Equator"
      }, {
        value: 23.43674,
        label: "Tropic of Cancer"
      }, {
        value: -23.43674,
        label: "Tropic of Capricorn"
      }];
      histogramChart.dataLineCreatedFunction = function(lineElement, labelElement, index){
        labelElement.setAttribute("fill", "#d1d1d1");
      };
      const vv = layer.renderer.visualVariables[0];
      histogramChart.barCreatedFunction = function(index, element) {
        const bin = histogramChart.bins[index];
        const midValue = (bin.maxValue - bin.minValue) / 2 + bin.minValue;
        const color = getColorFromValue(vv.stops, midValue);
        element.setAttribute("fill", color.toHex());

        element.addEventListener("focus", function() {
          const { minValue, maxValue, count } = bin;
          const query = layerView.layer.createQuery();
          query.where = `${field} >= ${minValue} AND ${field} <= ${maxValue}`;
          layerView.queryObjectIds(query).then(function(ids) {
            layerView.effect = {
              filter: {
                objectIds: ids
              },
              excludedEffect: "grayscale(100%) opacity(5%)"
            };
          });
        });
      };
      histogramMaxLabel.innerText = formatValue(histogramResult.maxValue);
      histogramMinLabel.innerText = formatValue(histogramResult.minValue);
      histogramTitle.innerText = vv.legendOptions.title;
    });
  }

  const clearBtn = document.getElementById("clearEffect");
  clearBtn.addEventListener("click", function(){
    layerView.effect = null;
  });

  function getAverage(fieldName) {
    return summaryStatistics({
      layer: layer,
      field: fieldName
    }).then(function(statistics) {
      return statistics.avg;
    });
  }

  function formatValue (value) {
    return intl.formatNumber(value, {
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }) + "°";
  }

  // infers the color for a given value
  // based on the stops from a ColorVariable
  function getColorFromValue(stops, value) {
    let minStop = stops[0];
    let maxStop = stops[stops.length - 1];

    const minStopValue = minStop.value;
    const maxStopValue = maxStop.value;

    if (value < minStopValue) {
      return minStop.color;
    }

    if (value > maxStopValue) {
      return maxStop.color;
    }

    const exactMatches = stops.filter(function(stop) {
      return stop.value === value;
    });

    if (exactMatches.length > 0) {
      return exactMatches[0].color;
    }

    minStop = null;
    maxStop = null;
    stops.forEach(function(stop, i) {
      if (!minStop && !maxStop && stop.value >= value) {
        minStop = stops[i - 1];
        maxStop = stop;
      }
    });

    const weightedPosition =
      (value - minStop.value) / (maxStop.value - minStop.value);

    return Color.blendColors(
      minStop.color,
      maxStop.color,
      weightedPosition
    );
  }

});