import { Asset } from "expo-asset";
import * as FileSystem from "expo-file-system";

const HTML_FILE_PATH = require(`./Map.html`);

const loadLocalAsset = async (asset) => {
  try {
    const [{ localUri }] = await Asset.loadAsync(asset);
    const fileString = await FileSystem.readAsStringAsync(localUri);

    return fileString;

  } catch (error) {
    console.warn(error);
    // console.warn("Unable to resolve index file");
  }
  return "asidaosid";
}

const loadHTMLFile = async () => {
  return loadLocalAsset(HTML_FILE_PATH);
};

function goToRegion(mapRef, { lat, long, zoom }) {
  mapRef.injectJavaScript(`map.setView([${lat}, ${long}], ${zoom});`);
}

const code_to_function = {
  "1": clickCallback,
  "2": markerCallback,
};

function clickCallback(payload) {
  return {
    object: "click",
    cords: payload.content,
  };
}

function markerCallback(payload) {
  return {
    object: "marker",
    id: payload.content,
  };
}

function handleEvent(event) {
  const payload = JSON.parse(event.nativeEvent.data);
  return code_to_function[payload.code](payload);
}

async function insertMarker(mapRef, ID, cords, icon) {
  var iconSvg = icon;

  if (typeof icon !== 'string' && !(icon instanceof String)) {
    iconSvg = await loadLocalAsset(icon);
  }

  mapRef.injectJavaScript(`
  var customIcon = L.divIcon({
    className: 'marker-class',
    html: \`${iconSvg}\`,
    iconSize: 100
  });

  // Check if there is no other marker with same ID already in map
  if (!(${ID} in markers)) {
    // Creates marker object
    markers[${ID}] = L.marker([${cords.lat}, ${cords.long}], {icon: customIcon, ID: ${ID}});

    // Add marker to map and bing callback event to its function
    markers[${ID}].addTo(map).on('click', onPopupClick);
  }`);
}

export { loadHTMLFile, handleEvent, insertMarker, goToRegion };