import React from 'react';
import { StyleSheet, View, ScrollView, RefreshControl, Button as RNButton, Modal, Text } from 'react-native';

export function Home() {
  const [modalVisible, setModalVisible] = React.useState(false);

  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Text>Open up 'src/App.tsx' to start working on your app!</Text>
      <RNButton title='Toggle modal' onPress={() => setModalVisible(true)} />
      <Modal visible={modalVisible} presentationStyle='formSheet' animationType='slide' >
        <Settings closeModal={() => setModalVisible(false)}/>
      </Modal>
    </View>
  );
}

export function Settings({ closeModal }: { closeModal?: () => void }) {
  return (
    <View style={styles.container}>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={false} onRefresh={() => {}} />
        }
      >
        <Text style={styles.text}>Empty List</Text>
        <RNButton title="Press me" onPress={() => console.log('Pressed!')} />
        {closeModal && (
          <RNButton title='Close modal' onPress={closeModal} />
        )}
      </ScrollView>
    </View>
  );
}


export default function BareReactNativeApp() {
  return <Home />;
}