import React, { FC } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  TouchableOpacityProps,
  TextStyle,
} from "react-native";
import Constants from "expo-constants";
import { useTrainMenu } from "../../stateBox/useTrainMenu";

const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
type MapsButtonProps = {
  onPress: () => void;
};
type stylesType = {
  touch: TouchableOpacityProps["style"];
  text: TextStyle;
};

export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
  const { mapSwitch } = useTrainMenu();
  const styles: stylesType = {
    touch: {
      position: "absolute",
      top,
      left: 10,
      width: 50,
      height: 50,
      backgroundColor: "#0099CC",
      borderColor: "white",
      borderStyle: "solid",
      borderWidth: 1,
      borderRadius: 50,
      alignContent: "center",
      alignSelf: "center",
      alignItems: "center",
      display: mapSwitch == "true" ? "flex" : "none",
      zIndex: 1000,
    },
    text: {
      textAlign: "center",
      width: "auto",
      height: "auto",
      textAlignVertical: "center",
      fontWeight: "bold",
      color: "white",
      fontSize: 20,
    },
  };
  return (
    <TouchableOpacity onPress={onPress} style={styles.touch}>
      <View style={{ flex: 1 }} />
      <Text style={styles.text}>≡</Text>
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};