import React, { FC } from "react";
import { Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
type Props = {
  index: number;
  indexBase: number;
  latlng: string[];
  D: any;
  d: string;
  navigate: (screen: string) => void;
  webview: any;
};

export const MapPin: FC<Props> = (props) => {
  const { index, indexBase, latlng, D, d, navigate, webview } = props;
  const {goBack} = useNavigation();
  return (
    <Marker
      key={index + indexBase}
      coordinate={{
        latitude: parseFloat(latlng[0]),
        longitude: parseFloat(latlng[1]),
      }}
      onPress={() => {
        webview.current?.injectJavaScript(
          `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');
          document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
        );
        if (navigate) goBack();
      }}
      image={require("../../assets/reccha-small.png")}
    ></Marker>
  );
};