require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/smartMapping/renderers/size",
  "esri/smartMapping/renderers/univariateColorSize",
  "esri/widgets/Legend",
  "esri/symbols/WebStyleSymbol",
  "esri/core/watchUtils"
], function (
  Map,
  MapView,
  FeatureLayer,
  sizeRendererCreator,
  univariateRendererCreator,
  Legend,
  WebStyleSymbol,
  watchUtils
) {
  const layer = new FeatureLayer({
    title: "Census tracts",
    portalItem: {
      id: "936481805c2d4639ac727938b32d8ec3"
    },
    layerId: 2,
    minScale: 0,
    maxScale: 0,
    opacity: 0.01
  });

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

  const view = new MapView({
    container: "viewDiv",
    map,
    center: [-83.0208, 42.4388],
    scale: 543438,
    constraints: {
      snapToZoom: false
    }
  });

  view.when(async () => {
    const layerView = await view.whenLayerView(layer);
    watchUtils.whenFalseOnce(layerView, "updating", updateLayer);
  });

  const legend = new Legend({
    view,
    container: document.getElementById("legend-container")
  });
  view.ui.add("container-div", "bottom-right");

  const themeSelect = document.getElementById("size-theme-select");
  themeSelect.addEventListener("change", updateLayer);

  const symbolSelect = document.getElementById("symbol-style-select");
  symbolSelect.addEventListener("change", updateLayer);

  const symbolStyleContainer = document.getElementById(
    "symbol-style-container"
  );

  // update the layer's renderer each time the user changes a parameter
  async function updateLayer() {
    const theme = themeSelect.value;
    const symbolStyle = symbolSelect.value;
    symbolStyleContainer.style.display =
      theme === "above-and-below" ? "block" : "none";

    const renderer = await createRenderer({ theme, symbolStyle });
    layer.renderer = renderer;
    layer.opacity = 1;
  }

  async function createRenderer({ theme, symbolStyle }) {
    // Update the legend title based on the selected theme
    const legendTitles = {
      above: `Increase in number of households 2000-2010`,
      below: `Decline in number of households 2000-2010`,
      "above-and-below": `Change in number of households 2000-2010`
    };

    const houseSymbol = new WebStyleSymbol({
      name: "house",
      styleName: "Esri2DPointSymbolsStyle"
    });
    
    const houseCIM = await houseSymbol.fetchCIMSymbol();

    let params = {
      layer,
      view,
      theme,
      valueExpression: `$feature.TOTHU10 - $feature.TOTHU00`,
      valueExpressionTitle: legendTitles[theme],
      minValue: -1000,
      maxValue: 2000,
      defaultSymbolEnabled: false,
      colorOptions: {
        isContinuous: false
      }
    };

    if (theme === "above-and-below") {
      params.symbolOptions =
        symbolStyle !== "none" || symbolStyle !== "house"
          ? {
              symbolStyle
            }
          : null;
      if (symbolStyle === "house") {
        params.symbolOptions = {
          symbols: {
            above: houseCIM,
            below: houseCIM.clone()
          }
        };
      }
      const {
        renderer
      } = await univariateRendererCreator.createContinuousRenderer(
        params
      );
      const colorVV = renderer.visualVariables.filter(
        (vv) => vv.type === "color"
      )[0];
      // colorVV.stops[0].value = -953;
      return renderer;
    } else {
      const {
        renderer
      } = await sizeRendererCreator.createContinuousRenderer(params);
      return renderer;
    }
  }
});