import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View, Image, StyleSheet, Text, Button, ScrollView } from 'react-native';
import data from './transfer.json' 



//change this to an external css file later
const styles = StyleSheet.create({
	
  buttons: {
	  flexDirection: 'row',
	  justifyContent: 'center',
	  marginTop: 30
  },
  container: {
    flexDirection: 'column',
	justifyContent: 'center',
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
	marginTop: 20
  },
  intro: {
	  fontWeight: "bold",
      color:"#beb2c8",
	  fontSize: 30,
	 
  },
  sub: {
      color:"#D7D6D6",
	  fontSize: 20,
  },
  scrollView:{
	  marginHorizontal: 20
  }
});

//default button press

const handlePress = () => false


//data parsing goes here

function importJSON() {
	var stuff = JSON.stringify(data)
	return stuff
}

//states

let states = {
		welcome:
		  
		  <View style = {styles.container}>
		  
		  
			<Text style={styles.intro}>WELCOME!!!!</Text>
		
			<Text style={styles.sub}>オレノウタヲキケ！</Text>
			 
			<Image source={require('./testimg.gif')} />
			
		  </View>,
		  
		dataView:
		
		<ScrollView style={styles.scrollView}>
		 <View style = {styles.container}>
		  
		  
			<Text style={styles.intro}>DATADATADATADATADATA</Text>
		
			<Text style={styles.sub}>{importJSON()}</Text>
			 
			<Image source={require('./testimg.gif')} />
			
		 </View>
		</ScrollView>
	}



class App extends React.Component {

//current state
state = {current: states.welcome}

//state changing functions
setHome = () => this.setState({ current: states.welcome })
setData = () => this.setState({ current: states.dataView })
	
	
	//render app
   render() {
      return (
	  <View>
		<View style = {styles.buttons}>
			  <Button
				 onPress = {this.setHome}
				 title = "Button1"
				 color = "blue"
			  />
			  
			  <Button
				 onPress = {this.setData}
				 title = "Button2"
				 color = "black"
			  />
		  </View>
		  {this.state.current}
	</View>
      );
   }
}


export default App