import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text } from "react-native";
import WebView from "react-native-webview";
import {
  loadHTMLFile,
  handleEvent,
  insertMarker,
  goToRegion,
} from "./LeafLetMap";
import MapModal from "../MapModal";

function bindEventsToListeners(
  event,
  clickListener,
  setMarkerListener,
  moveEndListener
) {
  switch (event.object) {
    case "click":
      clickListener && clickListener(event.cords);
      break;
    case "marker":
      setMarkerListener(event.id);
      break;
    case "moveend":
      moveEndListener && moveEndListener(event.id);
      break;
    default:
      break;
  }
}

function notEmpy(lista) {
  return lista && lista.size > 0;
}

export default function OpenStreetMap({
  markersList,
  animateToPosition,
  clickListener,
  moveEndListener,
}) {
  const [mapRef, setMapRef] = useState(null);
  const [webviewContent, setWebviewContent] = useState(null);
  const [markerListener, setMarkerListener] = useState(null);

  useEffect(() => {
    if (mapRef != null) {
      goToRegion(mapRef, animateToPosition);
    }
  }, [mapRef, animateToPosition]);

  markersList &&
    mapRef &&
    notEmpy(markersList) &&
    markersList.forEach((val, key) => {
      insertMarker(mapRef, val.ID, val.coordinate, val.icon);
    });

  loadHTMLFile()
    .then((html) => setWebviewContent(html))
    .catch((e) => console.warn(e));

  return (
    <View flex={1}>
      <WebView
        ref={(webViewRef) => {
          setMapRef(webViewRef);
        }}
        onMessage={(event) => {
          bindEventsToListeners(
            handleEvent(event),
            clickListener,
            setMarkerListener,
            moveEndListener
          );
        }}
        javaScriptEnabled={true}
        source={{ html: webviewContent }}
      />
      <View>
        <MapModal
          markerToRender={markerListener}
          setMarkerToRender={setMarkerListener}
          markers={markersList}
        />
      </View>

      <View style={styles.callback}>
        <Text style={styles.txt}>{markerListener}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  callback: {
    position: "absolute",
    top: 30,
    alignSelf: "center",
    alignItems: "center",
    backgroundColor: "gray",
    width: "80%",
    padding: 10,
  },
  txt: {
    color: "white",
  },
});