WPD-MobileApp/src/app/hooks/useSocketMarkers.js

import { useState, useEffect, useReducer, useContext } from "react";
import assets from "../config/assets";
import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";

const custom_assets = {
  pluviometer: assets.pluviometer,
  officialPluviometer: assets.officialPluviometer,
  floodZones: assets.floodZones,
  riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
    return assets.riverLevel[key];
  }),
  rainLevel: ["rain_0_5", "rain_1_5", "rain_2_5", "rain_3_5"].map((key) => {
    return assets.rainLevel[key];
  }),
};

const custom_assets_pin = {
  pluviometer: assets.pluviometer_pin,
  officialPluviometer: assets.officialPluviometer_pin,
  floodZones: {
    passable: PinTransitavel,
    not_passable: PinIntransitavel,
  },
  riverLevel: ["low_pin", "normal_pin", "high_pin", "flooding_pin"].map(
    (key) => {
      return assets.riverLevel[key];
    }
  ),
  rainLevel: [
    "rain_0_5_pin",
    "rain_1_5_pin",
    "rain_2_5_pin",
    "rain_3_5_pin",
  ].map((key) => {
    return assets.rainLevel[key];
  }),
};

const initialState = { markers: new Map() };

function getImage(name, situation) {
  if (name == "automaticPluviometer") {
    return custom_assets_pin.officialPluviometer;
  }

  if (name == "pluviometer") {
    return custom_assets_pin.pluviometer;
  }

  if (name == "rain") {
    if (situation == "SEM CHUVA") {
      return custom_assets_pin.rainLevel[0];
    } else if (situation == "CHUVA FRACA") {
      return custom_assets_pin.rainLevel[1];
    } else if (situation == "CHUVA MODERADA") {
      return custom_assets_pin.rainLevel[2];
    } else if (situation == "CHUVA FORTE") {
      return custom_assets_pin.rainLevel[3];
    }
    return custom_assets_pin.rainLevel[3];
  }

  if (name == "riverFlood") {
    if (situation == "BAIXO") {
      return custom_assets_pin.riverLevel[0];
    } else if (situation == "NORMAL") {
      return custom_assets_pin.riverLevel[1];
    } else if (situation == "ALTO") {
      return custom_assets_pin.riverLevel[2];
    } else if (situation == "INUNDAR") {
      return custom_assets_pin.riverLevel[3];
    }
    return custom_assets_pin.riverLevel[0];
  }
  if (name == "floodZones") {
    if (situation == "TRANSITAVEL") {
      return custom_assets_pin.floodZones.passable;
    } else {
      return custom_assets_pin.floodZones.not_passable;
    }
  }
}

function getLogo(name, situation) {
  if (name == "automaticPluviometer") {
    return custom_assets.officialPluviometer;
  }

  if (name == "pluviometer") {
    return custom_assets.pluviometer;
  }

  if (name == "rain") {
    if (situation == "sem chuva") {
      return custom_assets.rainLevel[0];
    } else if (situation == "chuva fraca") {
      return custom_assets.rainLevel[1];
    } else if (situation == "chuva moderada") {
      return custom_assets.rainLevel[2];
    } else if (situation == "chuva forte") {
      return custom_assets.rainLevel[3];
    } else {
      return custom_assets.rainLevel[3];
    }
  }

  if (name == "riverFlood") {
    if (situation == "baixo") {
      return custom_assets.riverLevel[0];
    } else if (situation == "normal") {
      return custom_assets.riverLevel[1];
    } else if (situation == "alto") {
      return custom_assets.riverLevel[2];
    } else if (situation == "inundar") {
      return custom_assets.riverLevel[3];
    }
    return custom_assets.riverLevel[0];
  }
  if (name == "floodZones") {
    return custom_assets.floodZones;
  }
}

function buildPolygonsObject(response, name) {
  var r = JSON.parse(response);
  var coordinate = [];
  var formsanswersgeom = r.formsanswersgeom;
  if (JSON.parse(formsanswersgeom).type == "Polygon") {
    const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
    var n = Object.keys(arrayCoordinates).length;

    for (let i = 0; i < n; i++) {
      var lat = arrayCoordinates[i][1];
      var lon = arrayCoordinates[i][0];
      coordinate.push([lat, lon]);
    }
    return {
      ID: r.formsanswersid,
      name: name,
      title: "Titulo", //response.fieldsanswerssituation
      address: "Endereço", //response.fieldsanswerseventaddress,
      coordinate: coordinate,
      date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
      description: "comentário", //response.fielsanswercomment,
      logo: custom_assets.pluviometer,
      pictures: null,
      image: "", //getMarkerImage(answer.name),
    };
  } else {
    return {
      ID: r.formsanswersid,
      name: name,
      title: "Titulo", //response.fieldsanswerssituation
      address: "Endereço", //response.fieldsanswerseventaddress,
      coordinate: [null, null],
      date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
      description: "comentário", //response.fielsanswercomment,
      logo: custom_assets.pluviometer,
      pictures: null,
      image: "", //getMarkerImage(answer.name),
    };;
  }
}

function buildMarkerObject(response, name) {
  const r = JSON.parse(response);
  const resposta = r.formsanswersgeom;
  const formsanswersgeom = JSON.parse(resposta).coordinates;

  var situation = null;
  var address = null;
  var date = null;
  var time = null;
  var comments = null;
  var pictures = null;

  if (r.fias) {
    r.fias.forEach(function (f) {
      if (f.fieldname == "situation") {
        situation = f.fieldsanswersvalue;
      }
      if (f.fieldname == "eventaddress") {
        address = f.fieldsanswersvalue;
      }
      if (f.fieldname == "eventdate") {
        date = f.fieldsanswersvalue;
      }
      if (f.fieldname == "eventtime") {
        time = f.fieldsanswersvalue;
      }
      if (f.fieldname == "comments") {
        comments = f.fieldsanswersvalue;
      }
    });
  }

  return {
    ID: r.formsanswersid,
    name: name,
    title: situation,
    address: address,
    coordinate: {
      latitude: formsanswersgeom[1],
      longitude: formsanswersgeom[0],
    },
    date: date + " | " + time,
    description: comments,
    logo: getLogo(),
    pictures: pictures,
    image: getImage(name, situation),
  };
}

function verifyResponse(response, name) {
  var markers = [];

  if (response) {
    const answer = JSON.parse(response);
    if (answer.success == true) {
      const formAnswer = answer.responseData.array_to_json;

      answer.responseData.array_to_json.forEach((r) =>
        r.formcode == "FLOODZONES_OFFICIAL"
          ? markers.push(buildPolygonsObject(JSON.stringify(r), name))
          : markers.push(buildMarkerObject(JSON.stringify(r), name))
      );
    }
  }
  return markers;
}

function getFormsAnswers(socketObject, dispatch) {
  const [socketResponse, setSocketResponse] = useState();

  socketObject.socketUrl.onerror = (e) => {
    console.log(e.message);
  };

  socketObject.socketUrl.onmessage = ({ data }) => {
    setSocketResponse(data);
  };

  useEffect(() => {
    dispatch({ increment: verifyResponse(socketResponse, socketObject.name) });
  }, [socketResponse]);
}

function reducer(state = initialState, action) {
  action.increment.map((val) => {
    state.markers.set(val.ID, val);
  });

  return { markers: state.markers };
}

export default function useSocketMarkers() {
  const [state, dispatch] = useReducer(reducer, initialState);
  global.formsSockets.forEach((socket) => getFormsAnswers(socket, dispatch));

  return state;
}