import React, { FC } from "react";
import { Image, StyleSheet, View, Platform } from "react-native";
import { Marker } from "react-native-maps";
import { useNavigation } from "@react-navigation/native";
import { useStationList } from "@/stateBox/useStationList";
import { StationProps } from "@/lib/CommonTypes";

type Props = {
  index: number;
  indexBase: number;
  latlng: string[];
  D: StationProps;
  d: string;
  navigate: (screen: string) => void;
  webview: React.RefObject<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]),
      }}
      anchor={{ x: 0.5, y: 1 }}
      tracksViewChanges={false}
      onPress={() => {
        const address = getInjectJavascriptAddress(D.StationNumber);
        if (!address) return;
        webview.current?.injectJavaScript(address);
        if (navigate) goBack();
      }}
    >
      <View style={styles.markerWrap}>
        <Image
          source={require("../../assets/reccha-small.png")}
          style={styles.markerImage}
          resizeMode="contain"
        />
      </View>
    </Marker>
  );
};

const MAP_PIN_SIZE = Platform.OS === "android" ? 32 : 36;

const styles = StyleSheet.create({
  markerWrap: {
    width: MAP_PIN_SIZE,
    height: MAP_PIN_SIZE,
    alignItems: "center",
    justifyContent: "center",
  },
  markerImage: {
    width: MAP_PIN_SIZE,
    height: MAP_PIN_SIZE,
  },
});