import React, { Component } from 'react';
import {
	View,
	TextInput,
	Text,
	TouchableOpacity,
	ScrollView,
	StyleSheet,
	Dimensions,
	Animated
} from 'react-native';
const window = Dimensions.get('window');

class RegisterPage extends Component {
	state = {
		x: 0,
		scrollX: new Animated.Value(0),
		next: false,
		back: false,
		email: '',
		username: '',
		password: '',
		passwordValidation: '',
	}

	handleNext = () => {
		const { x } = this.state;
		const toX = x + window.width;
		this.setState({x: toX}, () => {
			this.viewScroll.scrollTo({y: 0, x: toX });
		});
	}

	handleBack = () => {
		const { x } = this.state;
		const toX = x > 0 ? x - window.width : 0;

		this.setState({x: toX}, () => {
			this.viewScroll.scrollTo({y: 0, x: toX });
		});
	}

	handleSubmit = () => {
		console.log(this.state);
	}

	handleScroll = () => {
		Animated.event(
			[{nativeEvent: {contentOffset: {x: this.state.scrollX}}}],
			{
				useNativeDriver: true  // <- Native Driver used for animated events
			}
		);
	}

	render() {
		return (
				<ScrollView
					horizontal
					ref={ref => this.viewScroll = ref }
					scrollEnabled={false}
					scrollEventThrottle={16}
					onScroll={this.handleScroll}
					style={{flex: 1, backgroundColor: 'black'}}
				>
					<View style={styles.section}>
						<Text>Email</Text>
						<TextInput
							underlineColorAndroid="transparent"
							style={{width: 200, height: 40, borderColor: 'white', borderBottomWidth: 2, marginBottom: 20}}
							onChangeText={(text) => this.setState({text})}
						/>
						<TouchableOpacity onPress={this.handleNext}>
							<Text>NEXT</Text>
						</TouchableOpacity>
						<TouchableOpacity onPress={this.props.showLogin}>
							<Text>Login</Text>
						</TouchableOpacity>
					</View>

					<View style={styles.section}>
						<Text>Username</Text>
						<TextInput
							underlineColorAndroid="transparent"
							style={styles.input}
							onChangeText={(text) => this.setState({text})}
						/>
						<TouchableOpacity onPress={this.handleNext}>
						<Text>NEXT</Text>
						</TouchableOpacity>
						<TouchableOpacity onPress={this.handleBack}>
							<Text>BACK</Text>
						</TouchableOpacity>
					</View>

					<View style={styles.section}>
						<Text>Password</Text>
						<TextInput
							underlineColorAndroid="transparent"
							style={styles.input}
							onChangeText={(text) => this.setState({text})}
						/>
						<Text>Confirmar password</Text>
						<TextInput
							underlineColorAndroid="transparent"
							style={styles.input}
							onChangeText={(text) => this.setState({text})}
						/>
						<TouchableOpacity onPress={this.handleSubmit}>
						<Text>Entrar</Text>
						</TouchableOpacity>
						<TouchableOpacity onPress={this.handleBack}>
							<Text>BACK</Text>
						</TouchableOpacity>
					</View>
				</ScrollView>
		)
	}
}

const styles = StyleSheet.create({
	container: {
    backgroundColor: 'transparent',
    position: 'relative',
    flex: 1
  },
	section: {
		flex: 1,
		backgroundColor: '#1A2F3B',
		justifyContent: 'center',
		alignItems: 'center',
		height: window.height,
		width: window.width
	},
	input: {
		width: 200,
		height: 40,
		borderColor: 'white',
		borderBottomWidth: 2,
		marginBottom: 20
	}
});

export default RegisterPage;