reactiveUtils

// Watching for changes in a boolean value
// Equivalent to watchUtils.watch()
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.watch(
 () => viewElement.popup?.visible,
 () => {
   console.log(`Popup visible: ${viewElement.popup.visible}`);
 });

// Watching for changes within a Collection
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.watch(
 () => viewElement.map.allLayers.length,
 () => {
   console.log(`Layer collection length changed: ${viewElement.map.allLayers.length}`);
 });

// Watch for changes in a numerical value.
// Providing `initial: true` in ReactiveWatchOptions
// checks immediately after initialization
// Equivalent to watchUtils.init()
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.watch(
 () => viewElement.zoom,
 () => {
   console.log(`zoom changed to ${viewElement.zoom}`);
 },
 {
   initial: true
 });

// Watch properties from multiple sources
const viewElement = document.querySelector("arcgis-map");
const handle = reactiveUtils.watch(
 () => [viewElement.stationary, viewElement.zoom],
 ([stationary, zoom]) => {
   // Only print the new zoom value when the map component is stationary
   if(stationary){
     console.log(`Change in zoom level: ${zoom}`);
   }
 }
);

// Observe when a boolean property becomes not truthy
// Equivalent to watchUtils.whenFalse()
reactiveUtils.when(
  () => !layerView.updating,
  () => {
    console.log("LayerView finished updating.");
  });

// Observe when a boolean property becomes true
// Equivalent to watchUtils.whenTrue()
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.when(
  () => viewElement?.stationary === true,
  async () => {
    console.log("User is no longer interacting with the map");
    await drawBuffer();
  });

// Observe a boolean property for truthiness.
// Providing `once: true` in ReactiveWatchOptions
// only fires the callback once
// Equivalent to watchUtils.whenFalseOnce()
const featuresComponent = document.querySelector("arcgis-features");
reactiveUtils.when(
  () => !featuresComponent.closed,
  () => {
    console.log(`The features component is closed: ${featuresComponent.closed}`);
  },
  {
    once: true
  });

// Adds a click event on a map component when it changes
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.on(
  () => viewElement,
  "arcgisViewClick",
  (event) => {
    console.log("arcgisViewClick event emitted: ", event);
  });

// Adds a drag event on a map component and adds a callback
// to check when the listener is added and removed.
// Providing `once: true` in the ReactiveListenerOptions
// removes the event after first callback.
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.on(
  () => viewElement,
  "arcgisViewDrag",
  (event) => {
    console.log(`Drag event emitted: ${event}`);
  },
  {
    once: true,
    onListenerAdd: () => console.log("Drag listener added!"),
    onListenerRemove: () => console.log("Drag listener removed!")
  });

// Observe the first time a property equals a specific string value
// Equivalent to watchUtils.once()
reactiveUtils.once(
  () => featureLayer.loadStatus === "loaded")
  .then(() => {
    console.log("featureLayer loadStatus is loaded.");
  });

// Use a comparison operator to observe a first time
// difference in numerical values
const viewElement = document.querySelector("arcgis-map");
const someFunction = async () => {
  await reactiveUtils.once(() => viewElement.zoom > 20);
  console.log("Zoom level is greater than 20!");
}

// Use a comparison operator and optional chaining to observe a
// first time difference in numerical values.
reactiveUtils.once(
  () => map?.allLayers?.length > 2)
  .then((value) => {
    console.log(`The map now has ${value} layers.`);
  });

// Check for the first time a property becomes truthy
// Equivalent to watchUtils.whenOnce()
const viewElement = document.querySelector("arcgis-map");
reactiveUtils.whenOnce(
  () => viewElement.popup?.visible)
  .then(() => {
    console.log("Popup used for the first time");
  });

// Check for the first time a property becomes not truthy
// Equivalent to watchUtils.whenFalseOnce()
const someFunction = async () => {
  await reactiveUtils.whenOnce(() => !layerView.updating);
  console.log("LayerView is no longer updating");
}

// Check for the first time a property becomes truthy
// And, use AbortController to potentially cancel the async callback
const abortController = new AbortController();
const viewElement = document.querySelector("arcgis-map");

// Observe the map component's updating state
reactiveUtils.whenOnce(
  () => viewElement?.updating, {signal: abortController.signal})
  .then((updating) => {
    console.log(`Map component's updating state is ${updating.state}`)
  });

// Cancel the async callback
const someFunction = () => {
  abortController.abort();
}