import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { renderPlatformUI, LoremIpsumData } from './shared/DataComponents.js';

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 {
	render() {
		return (
			<LoremIpsumData render={renderPlatformUI(LoremIpsumUI)} />
		);
	}
}

class LoremIpsumUI extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.header}>MOBILE VERSION</Text>
				<Text style={styles.text}>{this.props.text}</Text>
			</View>
		);
	}
}

import React, { Component } from 'react';

export function renderPlatformUI(PlatformChild) {
	return (childProps) => {
		return (<PlatformChild {...childProps} />);
	}
}

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

	async componentDidMount() {
		await delay(3000);
		let newTextResponse = await fetch('https://baconipsum.com/api/?type=meat-and-filler&sentences=3&format=text&start-with-lorem=1');
		let newText = await newTextResponse.text();
		this.setState({ text: newText });
	}

	render() {
		return this.props.render({text : this.state.text});
	}
}

function delay(ms) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve();
		}, ms);
	});
}