import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#F5FCFF'
	},
	header : { fontWeight: 'bold', fontSize: 20 },
	text : {padding : 40}
});

export default class LoremIpsumScreen extends Component {
	constructor(props) {
		super(props);
		this.state = {
			text: 'Loading...'
		};
	}

	async componentDidMount() {
		await delay(3000);
		let newTextResponse = await fetch('https://loripsum.net/api/1/short/plaintext');
		let newText = await newTextResponse.text();
		this.setState({ text: newText });
	}

	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.header}>MOBILE VERSION</Text>
				<Text style={styles.text}>{this.state.text}</Text>
			</View>
		);
	}
}

// helper function to insert delays in async functions
function delay(ms) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve();
		}, ms);
	});
}