require(["esri/Map", "esri/views/MapView"], function (ArcGISMap, MapView) {
  const map = new ArcGISMap({
    basemap: "streets"
  });
  const view = new MapView({
    container: "viewDiv",
    map
  });

  const values = ["Male", "Female"];

  const numberUpTo = (n) => Math.round(Math.random() * n);

  view.on("click", ({ mapPoint }) => {
    const graphic = {
      geometry: mapPoint,
      attributes: {
        sex: values[numberUpTo(1)],
        visitors: numberUpTo(4) + 1
      }
    };
    graphic.symbol = {
      type: "cim",
      data: getPointSymbolData(
        graphic.attributes.visitors,
        graphic.attributes.sex
      )
    };
    view.graphics.add(graphic);
  });

  // See https://github.com/Esri/cim-spec/blob/master/docs/v2/CIMSymbols.md#cimpointsymbol
  //  for more information on CIM properties
  function getPointSymbolData(num, sx) {
    return {
      type: "CIMPointSymbol",
      symbolLayers: [
        {
          type: "CIMVectorMarker",
          enable: true,
          size: 12,
          colorLocked: true,
          anchorPointUnits: "Relative",
          frame: { xmin: -5, ymin: -5, xmax: 5, ymax: 5 },
          markerGraphics: [
            {
              type: "CIMMarkerGraphic",
              geometry: { x: 0, y: 0 },
              symbol: {
                type: "CIMTextSymbol",
                fontFamilyName: "Arial",
                fontStyleName: "Bold",
                height: 6,
                horizontalAlignment: "Center",
                offsetX: 12.5,
                offsetY: 12.5,
                symbol: {
                  type: "CIMPolygonSymbol",
                  symbolLayers: [
                    {
                      type: "CIMSolidFill",
                      enable: true,
                      color: [255, 255, 255, 255]
                    }
                  ]
                },
                verticalAlignment: "Center"
              },
              textString: String(num)
            }
          ],
          scaleSymbolsProportionally: true,
          respectFrame: true
        },
        {
          type: "CIMVectorMarker",
          enable: true,
          anchorPoint: { x: -1.5, y: -1.5},
          anchorPointUnits: "Relative",
          size: 10,
          frame: { xmin: 0.0, ymin: 0.0, xmax: 17.0, ymax: 17.0 },
          markerGraphics: [
            {
              type: "CIMMarkerGraphic",
              geometry: {
                rings: [
                  [
                    [8.5, 0.2],
                    [7.06, 0.33],
                    [5.66, 0.7],
                    [4.35, 1.31],
                    [3.16, 2.14],
                    [2.14, 3.16],
                    [1.31, 4.35],
                    [0.7, 5.66],
                    [0.33, 7.06],
                    [0.2, 8.5],
                    [0.33, 9.94],
                    [0.7, 11.34],
                    [1.31, 12.65],
                    [2.14, 13.84],
                    [3.16, 14.86],
                    [4.35, 15.69],
                    [5.66, 16.3],
                    [7.06, 16.67],
                    [8.5, 16.8],
                    [9.94, 16.67],
                    [11.34, 16.3],
                    [12.65, 15.69],
                    [13.84, 14.86],
                    [14.86, 13.84],
                    [15.69, 12.65],
                    [16.3, 11.34],
                    [16.67, 9.94],
                    [16.8, 8.5],
                    [16.67, 7.06],
                    [16.3, 5.66],
                    [15.69, 4.35],
                    [14.86, 3.16],
                    [13.84, 2.14],
                    [12.65, 1.31],
                    [11.34, 0.7],
                    [9.94, 0.33],
                    [8.5, 0.2]
                  ]
                ]
              },
              symbol: {
                type: "CIMPolygonSymbol",
                symbolLayers: [
                  {
                    type: "CIMSolidFill",
                    enable: true,
                    color: [30, 139, 195, 255]
                  }
                ]
              }
            }
          ],
          scaleSymbolsProportionally: true,
          respectFrame: true
        },
        {
          type: "CIMVectorMarker",
          enable: true,
          anchorPoint: { x: 0, y: 0 },
          anchorPointUnits: "Relative",
          size: 12,
          frame: { xmin: 0.0, ymin: 0.0, xmax: 17.0, ymax: 17.0 },
          markerGraphics: [
            {
              type: "CIMMarkerGraphic",
              geometry: {
                rings: [
                  [
                    [0, 0],
                    [0, 25],
                    [5, 25],
                    [5, 18],
                    [8, 18],
                    [8, 15],
                    [30, 15],
                    [30, 20],
                    [35, 20],
                    [35, 0],
                    [30, 0],
                    [30, 3],
                    [5, 3],
                    [5, 0],
                    [0, 0]
                  ]
                ]
              },
              symbol: {
                type: "CIMPolygonSymbol",
                symbolLayers: [
                  {
                    type: "CIMSolidFill",
                    enable: true,
                    color:
                      sx === "Male" ? [77, 5, 232, 255] : [247, 202, 24, 255]
                  }
                ]
              }
            }
          ]
        }
      ]
    };
  }
});