import React, {useState, useEffect} from 'react';
import { View, Image, Text, Button, ScrollView, Pressable, Linking,StyleSheet} from 'react-native';
import {Picker, DataButton} from "./Datos"
import { styles } from './styles';



//actual application

class App extends React.Component {

//the text at the end of a page gets cut off if anyone knows how to fix that?
vars = {
	welcome:

	<View style = {styles.containerbackground}>
		<ScrollView style={styles.scrollView}>
			<View style = {styles.container}>
				<Text style={styles.intro}>Bienvenido!</Text>
			</View>

			<View style = {styles.container}>
				
				<Text style={styles.sub}>Aquí podra mantenerse al tanto con las 
					últimas noticias relacionadas al Censo y tener acceso a los  
					los Demographic Data Profiles de cada municipio de
					Puerto Rico.
				</Text>
			</View>

			<View style = {styles.bottom}>
				<Text style={styles.intro2}>Contactenos:</Text>
				<Text style={styles.sub}>Prof: Hernando Mattei Torres
				<Button onPress={() => Linking.openURL('mailto:hernando.mattei@upr.edu') }
				title="e-mail" /></Text>
				<Text style={styles.sub}>Angelica Rosario Santos
				<Button onPress={() => Linking.openURL('mailto:angelica.rosario2@upr.edu') }
				title="e-mail" /></Text>
				<Text style={styles.sub}>Data from:</Text>
				<Image source={require('./census-logos.png')} />
				<Button onPress={() => Linking.openURL('https://data.census.gov/profile?q=United+States&g=0100000US') }
				title="United States Census page" />
			</View>
		</ScrollView>
	</View>,

						
	newsView:
		<View style = {styles.containerbackground}>
			<ScrollView style={styles.scrollView}>
				<View style = {styles.container}>
					
					<Text style={styles.intro}>Noticias</Text>
					
					<Image source={require('./Logo.jpeg')} />
					
				</View>
			</ScrollView>
		</View>,
		
	dataOp:
		<View style = {styles.containerbackground}>
			<ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
				<View style = {styles.container}>
					<Text style={styles.intro}>DATA VIEWING PROJECT</Text>		
				</View>	

				 
					<Picker />
				
					<DataButton />
				

			</ScrollView>	
			
		</View>

		
}


	//current state
	state = {current: this.vars.welcome}

	//state changing functions
	setHome = () => this.setState({ current: this.vars.welcome })


	setData = () => this.setState({current: this.vars.dataOp})


	setNews = () => this.setState({ current: this.vars.newsView })

	

	//render app
   render() {
		return (
			<View>
				<View style = {styles.containerbackground}>
					<View style = {styles.buttonContainer}>
						
						<Text style={styles.Navsub}> Demographic Data Viewer</Text>
							
						<View style = {styles.navContainer}>
							<Pressable style={styles.buttons} onPress = {this.setNews}>
								<Text style={styles.text}> Noticias</Text>
							</Pressable>

							<Pressable style={styles.buttons} onPress = {this.setHome}>
								<Text style={styles.text}> Hogar</Text>
							</Pressable>

							<Pressable style={styles.buttons} onPress = {this.setData}>
								<Text style={styles.text}> Datos</Text>
							</Pressable>

						</View>
								
						{this.state.current}

					</View>

				</View>

			</View>
		);
   }
}


export default App