import React , { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import RoutingSystem from './lib/systems/RoutingSystem.js'
import ViewSystem from './lib/systems/ViewSystem.js'


let VS = new ViewSystem();
VS.print();
let RS = new RoutingSystem();
RS.addRoute("test", "test")
.addRoute("test.info.skata", "skata")
.setView("test.info.skata", <Text>HAHAHHA</Text>)
.addRoute("test.info.avga", "avga")
.setHome('test')
.print();
// RS.removeRoute("test.info.skata")

const useForceUpdate = () => useState()[1];
export default function App() {
  let [text, setText] = useState('');
  let forceUpdate = useForceUpdate();
  let CurrentView = RS.getCurrentView();
  console.log("RENDER");
  return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(txt) => setText(txt)}
        value={text}
      />
      <Button title={'Change Route'} onPress={() => {
        RS.goTo(text);
        forceUpdate();
      }}></Button>
      <Text>Open up App.js to start working on your app!</Text>
      {CurrentView}
    </View>
  );
}

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