import { NewAppScreen } from '@react-native/new-app-screen'
import { useEffect, useState } from 'react'
import { StatusBar, Text, StyleSheet, useColorScheme, View } from 'react-native'
import { NativeEventEmitter, NativeModules } from 'react-native'
const { Emitter } = NativeModules;

export default function App() {
  const isDarkMode = useColorScheme() === 'dark'
  const [message, setMessage] = useState(null)
  
  useEffect(() => {
    const emitter = new NativeEventEmitter(Emitter);
    const subscription = emitter.addListener('onMessage', (event) => {
      if (event?.message) {
        setMessage(event.message)
      }
    })

    return () => {
      subscription.remove()
    };
  }, [])

  return (
    <View style={styles.container}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <Text>{message ?? 'Waiting for message...'}</Text>
      <NewAppScreen templateFileName="App.tsx" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})