text: import { runInAction, makeAutoObservable } from 'mobx';
  import { fetchNearbyProtests } from '../api';
  
  class ProtestStore {
    rootStore = null;
    nearbyProtests = [];
    state = 'pending';
  
    constructor(rootStore) {
      makeAutoObservable(this, { rootStore: false });
      this.rootStore = rootStore;
    }
  
    get closeProtests() {
      if (this.nearbyProtests.length > 0) {
        const closeList = this.nearbyProtests.filter((p) => p.distance < 2000).sort((p1, p2) => p1.distance - p2.distance);
        return closeList;
  
        // The following code will be used in times when need to push a protest up in the list
        // For example, during marches, we want the protest to be the first available even if
        // the protest location is not the closest to the user.
  
        // const marchProtest = this.nearbyProtests.find((p) => p.id === 'eoLv9Kb4x3sFBcAkcdMh');
        // if (marchProtest) {
        //   closeList.splice(closeList.indexOf(marchProtest), 1);
        //   closeList.unshift(marchProtest);
        // }
        // return closeList;
      }
  
      return [];
    }
  
    get farProtests() {
      if (this.nearbyProtests.length > 0) {
        return this.nearbyProtests.filter((p) => p.distance >= 2000).sort((p1, p2) => p1.distance - p2.distance);
      }
      return [];
    }
  
    async fetchProtests({ onlyMarkers, position }) {
      this.state = 'pending';
  
      try {
        const coordinates = position || this.rootStore.userCoordinates;
        if (coordinates?.length === 2) {
          const protests = await fetchNearbyProtests(coordinates);
          if (!onlyMarkers) {
            runInAction(() => {
              this.nearbyProtests = protests;
            });
          }
  
          this.rootStore.mapStore.updateMarkers(protests);
        }
  
        runInAction(() => {
          this.state = 'done';
        });
      } catch (e) {
        console.error(e);
        this.state = 'error';
      }
    }
  }
  
  export default ProtestStore;
  