import {ActivityIndicator, SafeAreaView, StyleSheet, Text} from 'react-native';
import BusStopInfoScreen from './BusStopInfoScreen';
import useRemoteConfig from '../../infraestructure/hooks/useRemoteConfig';
import Status from '../../utils/Status';

const ERROR_MESSAGE = 'Ha ocurrido un error';

const App = () => {
  const {status} = useRemoteConfig();

  if (status === Status.LOADING) {
    return (
      <SafeAreaView style={styles.centeredContainer}>
        <ActivityIndicator testID="LOADING" />
      </SafeAreaView>
    );
  }

  if (status === Status.ERROR) {
    return (
      <SafeAreaView style={styles.centeredContainer}>
        <Text>{ERROR_MESSAGE}</Text>
      </SafeAreaView>
    );
  }
  return (
    <SafeAreaView style={styles.container}>
      <BusStopInfoScreen />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centeredContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;