import { View, Text } from "react-native";
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
import LottieView from "lottie-react-native";
import { Ionicons, AntDesign } from "@expo/vector-icons";
import { useStationList } from "@/stateBox/useStationList";
import { useNavigation } from "@react-navigation/native";

export const Header = ({ station }) => {
  const {
    currentTrainLoading,
    setCurrentTrainLoading,
    getCurrentTrain,
    inject,
  } = useCurrentTrain();
  const { getInjectJavascriptAddress } = useStationList();
  const { navigate } = useNavigation();
  return (
    <View
      style={{
        alignContent: "center",
        alignItems: "center",
        width: "100%",
        marginVertical: 10,
        flexDirection: "row",
      }}
    >
      <View style={{ flex: 1, flexDirection: "column", alignItems: "center" }}>
      </View>
      <View style={{}}>
        <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
          次の列車
        </Text>
        <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
      </View>
      <View style={{ flex: 1, flexDirection: "row-reverse" }}>
        {currentTrainLoading == "loading" ? (
          <LottieView
            autoPlay
            loop
            style={{ width: 40, height: 40, marginRight: 30 }}
            source={require("../../../assets/51690-loading-diamonds.json")}
          />
        ) : currentTrainLoading == "error" ? (
          <Ionicons
            name="reload"
            color="white"
            size={30}
            style={{ marginRight: 30 }}
            onPress={() => {
              setCurrentTrainLoading("loading");
              getCurrentTrain();
            }}
          />
        ) : null}
      </View>
    </View>
  );
};