import React, { FC } from "react";
import { Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
import { useStationList } from "@/stateBox/useStationList";
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();
  const { getInjectJavascriptAddress } = useStationList();
  return (
    <Marker
      key={index + indexBase}
      coordinate={{
        latitude: parseFloat(latlng[0]),
        longitude: parseFloat(latlng[1]),
      }}
      onPress={() => {
        const address = getInjectJavascriptAddress(D.StationNumber);
        if (!address) return;
        webview.current?.injectJavaScript(address);
        if (navigate) goBack();
      }}
      image={require("../../assets/reccha-small.png")}
    ></Marker>
  );
};