import { FC } from "react";
import { TouchableOpacity, View, Text, Linking } from "react-native";
import { useStationList } from "@/stateBox/useStationList";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import AntDesign from "react-native-vector-icons/AntDesign";
type Props = {
  stationNumber: string;
  onExit: () => void;
  navigate?: (screen: string, params: { screen: string }) => void;
};
export const StationTrainPositionButton: FC<Props> = (props) => {
  const { stationNumber, onExit, navigate } = props;
  const {
    inject,
  } = useCurrentTrain();
  const { getInjectJavascriptAddress } = useStationList();
  return (
    <TouchableOpacity
      style={{
        height: 50,
        backgroundColor: "#0099CC",
        flexDirection: "row",
        alignContent: "center",
        alignItems: "center",
        margin: 2,
        flex: 1
      }}
      onPress={() => {
        navigate("positions", { screen: "Apps" });
        const script = getInjectJavascriptAddress(stationNumber);
        inject(script);
        onExit();
      }}
    >
      <View style={{ flex: 1 }} />
      <AntDesign
        name={"barchart"}
        size={20}
        color={"white"}
        style={{ marginHorizontal: 5, marginVertical: 5 }}
      />
      <Text
        style={{
          color: "white",
          textAlign: "center",
          textAlignVertical: "center",
        }}
      >
        走行位置に移動
      </Text>
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};