import React, { FC } from "react";
import {
  View,
  TouchableOpacity,
  TouchableOpacityProps,
  TextStyle,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useThemeColors } from "@/lib/theme";
import { useTrainMenu } from "../../stateBox/useTrainMenu";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useResponsive } from "@/lib/responsive";

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