import React, { FC } from "react";
import {
  View,
  TouchableOpacity,
  Platform,
  TouchableOpacityProps,
  TextStyle,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Constants from "expo-constants";
import { useTrainMenu } from "../../stateBox/useTrainMenu";
const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;

type stylesType = {
  touch: TouchableOpacityProps["style"];
  text: TextStyle;
};
type ReloadButton = {
    onPress: () => void;
    right: number;
    
}
export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
  const { mapSwitch, LoadError = false } = useTrainMenu();
  const styles: stylesType = {
    touch: {
      position: "absolute",
      top,
      right: 10 + right,
      width: 50,
      height: 50,
      backgroundColor: LoadError ? "red" : "#0099CC",
      borderColor: "white",
      borderStyle: "solid",
      borderWidth: 1,
      borderRadius: 50,
      alignContent: "center",
      alignSelf: "center",
      alignItems: "center",
      display: mapSwitch,
    },
    text: {
      textAlign: "center",
      width: "auto",
      height: "auto",
      textAlignVertical: "center",
      fontWeight: "bold",
      color: "white",
    },
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles.touch}>
      <View style={{ flex: 1 }} />
      <Ionicons name="reload" color="white" size={30} />
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};