import React, {Component} from "react";
import {Image, View,ScrollView, Modal, TouchableHighlight, TouchableWithoutFeedback, Slider, ActionSheetIOS, SafeAreaView, Dimensions, Picker, Text, Platform, TouchableOpacity, Button} from "react-native";
import styles from "./style";
import { connect } from 'react-redux';
import { Card } from 'react-native-elements';
import options from './optionsdata.js';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class SocialIntegration extends Component {
	static navigationOptions = {headerShown: false, gesturesEnabled: false,};
	constructor(props) {
	super(props);
	this.state = {
		isFBVisible: false,
		isGCVisible:  false,
		isLocVisible: false,
		preferencesArray: this.props.navigation.getParam("preferences"),
		calendarSync: false,
	};
	console.log("Social")
    console.log(this.state.preferencesArray)
}

getModal(visible, isFB){
	if (isFB) {
		this.setState({ isFBVisible: visible });
	} else {
		this.setState({ isGCVisible: visible });
	}
}

getLocModal(visible){
	this.setState({ isLocVisible: visible });
}

connectCalendar(screenWidth){
	this.setState({ calendarSync: true })
	this.scroll.scrollTo({ x: screenWidth * 3, animated: false })
}
render() {
	const navigation = this.props.navigation;
	const screenWidth = Dimensions.get('window').width;
	//https://www.tutorialspoint.com/react_native/react_native_modal.htm
	//https://github.com/ReactNativeSchool/react-native-quiz/blob/master/App/data/computers.js
	//https://stackoverflow.com/questions/51629192/react-native-horizontal-scroll-on-button-click
	return (
		<ScrollView horizontal={true} scrollEnabled={false} pagingEnabled={true} decelerationRate={'fast'} showsHorizontalScrollIndicator={false} ref={(node) => this.scroll = node}>
			<View style={this.state.isFBVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : ''}>
			<View style={styles.screenContainer}>
				<Text style={[styles.textContainer, this.state.isFBVisible ? {backgroundColor: '#404040'} : '']}>
					Help me by connecting Facebook!
				</Text>
				<TouchableOpacity
					style={styles.infoPopupContainer}
					activeOpacity={.2}
					onPress={() => {this.getModal(true, true)}}>
					<Text style={styles.infoPopupText}>
						Why do this?
					</Text>
				</TouchableOpacity>
			</View>
			<View style={styles.backgroundModal}>
				<Modal animationType = {"fade"} transparent = {true}
					visible = {this.state.isFBVisible}>
					<View style = {styles.modalContainer}>
						<Text style={styles.modalText}>
						Why do we ask for Facebook?
						</Text>
						<Text style={styles.modalBody}>
						I connect with Facebook so that I can learn from what you and your friends have done before to provide better recommendations.
						</Text>
						<TouchableHighlight style={styles.modalExit} onPress = {() => {
							this.getModal(!this.state.isFBVisible, true)}}>
							<Text style={styles.modalExitText}>X</Text>
						</TouchableHighlight>
					</View>
				</Modal>
			</View>
			<View style={styles.globeContainer}>
				<Image source={this.state.isFBVisible ? require('../globe_grayscale.png') : require('../globe.png')} style={styles.globePosition}/>
			</View>
			<View style={styles.buttonContainer}>
					<TouchableOpacity
						style={styles.FBButton}
						activeOpacity={.8}
						onPress={() => { this.scroll.scrollTo({ x: screenWidth, animated: false}) }}>
						<Image source={{uri: "https://image.flaticon.com/icons/png/512/124/124010.png"}} style={styles.optionImage}/>
						<Text style={styles.optionLabel}>
							Continue with Facebook
						</Text>
					</TouchableOpacity>
			</View>
			<TouchableOpacity style={[styles.prevButton, this.state.isFBVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.props.navigation.navigate('Survey', { preferences: this.state.preferencesArray}) }}>
			   <Image source={require('./left.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			</View>


			<View style={this.state.isFBVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : ''}>
			<View style={styles.screenContainer}>
				<Text style={[styles.textContainer, this.state.isFBVisible ? {backgroundColor: '#404040'} : '']}>
					Help me by connecting Facebook!
				</Text>
				<TouchableOpacity
					style={styles.infoPopupContainer}
					activeOpacity={.2}
					onPress={() => {this.getModal(true, true)}}>
					<Text style={styles.infoPopupText}>
						Why do this?
					</Text>
				</TouchableOpacity>
			</View>
			<View style={styles.backgroundModal}>
				<Modal animationType = {"fade"} transparent = {true}
					visible = {this.state.isFBVisible}>
					<View style = {styles.modalContainer}>
						<Text style={styles.modalText}>Why do we ask for Facebook?</Text>
						<Text style={styles.modalBody}>I connect with Facebook so that I can learn from what you and your friends have done before to provide better recommendations.</Text>
						<TouchableHighlight style={styles.modalExit} onPress = {() => {
							this.getModal(!this.state.isFBVisible, true)}}>
							<Text style={styles.modalExitText}>X</Text>
						</TouchableHighlight>
					</View>
				</Modal>
			</View>
			<View style={styles.globeContainer}>
				<Image source={this.state.isFBVisible ? require('../globe_grayscale.png') : require('../globe.png')} style={styles.globePosition}/>
			</View>
			<View style={styles.buttonContainer}>
					<TouchableWithoutFeedback>
						<View style={styles.FBButtonPressed}>
						<View style={{
					position: 'absolute',
					top: 5,
					height: 15,
					width: screenWidth * .9,
					marginTop: 0,
					backgroundColor: '#3f4966',
				    alignSelf: 'center',
				    shadowColor: 'rgba(0, 0, 0, 0.7)',
				    shadowOffset: {
				      width: 0,
				      height: -5
				    },
				    borderRadius: 10,
				    shadowRadius: 2,
				    shadowOpacity: .4
				}}>
				</View>
				<View style={{
					position: 'absolute',
					left: 4,
					top: 6,
					height: 74,
					width: 10,
					marginTop: 0,
					backgroundColor: '#3f4966',
				    shadowColor: 'rgba(0, 0, 0, 0.7)',
				    shadowOffset: {
				      width: -5,
				      height: 0,
				    },
				    borderRadius: 10,
				    shadowRadius: 2,
				    shadowOpacity: .4
				}}>
				</View>
						<Image source={{uri: "https://image.flaticon.com/icons/png/512/124/124010.png"}} style={styles.optionImage}/>
						<Text style={styles.optionLabel}>
							Continue with Facebook
						</Text>
						</View>
					</TouchableWithoutFeedback>
			</View>
			<View style={{alignItems: 'center', justifyContent: 'center'}}>
				<Text style={{fontSize: 16, fontWeight: 'bold'}}>
					Successfully Connected!
				</Text>
			</View>
			<TouchableOpacity style={[styles.prevButton, this.state.isFBVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: 0, animated: false}) }}>
			   <Image source={require('./left.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			<TouchableOpacity style={[styles.nextButton, this.state.isFBVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: screenWidth * 2, animated: false }) }}>
			   <Image source={require('./right.png')} style={styles.nextObject}/>
			 </TouchableOpacity>
			</View>


			<View style={this.state.isGCVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : ''}>
			<View style={styles.screenContainer}>
				<Text style={[styles.textContainer, this.state.isGCVisible ? {backgroundColor: '#404040'} : '']}>
					Help me by connecting Google Calendar!
				</Text>
				<TouchableOpacity
					style={styles.infoPopupContainer}
					activeOpacity={.2}
					onPress={() => {this.getModal(true, false)}}>
					<Text style={styles.infoPopupText}>
						Why do this?
					</Text>
				</TouchableOpacity>
			</View>
			<View style={styles.backgroundModal}>
				<Modal animationType = {"fade"} transparent = {true}
					visible = {this.state.isGCVisible}>
					<View style = {styles.modalContainer}>
						<Text style={styles.modalText}>Why Google Calendar?</Text>
						<Text style={styles.modalBody}>I use Google Calendar to optimize my recommendations to work better with any plans that you already have set.</Text>
						<TouchableHighlight style={styles.modalExit} onPress = {() => {
							this.getModal(!this.state.isGCVisible, false)}}>
							<Text style={styles.modalExitText}>X</Text>
						</TouchableHighlight>
					</View>
				</Modal>
			</View>
			<View style={styles.globeContainer}>
				<Image source={this.state.isGCVisible ? require('../globe_grayscale.png') : require('../globe.png')} style={styles.globePosition}/>
			</View>
			<View style={styles.buttonContainer}>
					<TouchableOpacity
						style={styles.GCalButton}
						activeOpacity={.8}
						onPress={() => this.connectCalendar(screenWidth)}>
						<Image source={require("./gcal.png")} style={styles.optionImage2}/>
						<Text style={styles.optionLabel}>
							Connect Google Calendar
						</Text>
					</TouchableOpacity>
					<TouchableOpacity
						style={styles.laterButton}
						activeOpacity={.8}
						onPress={() => { this.scroll.scrollTo({ x: screenWidth * 4, animated: false }) }}>
						<Text style={styles.laterLabel}>
							Later
						</Text>
					</TouchableOpacity>
			</View>
			<TouchableOpacity style={[styles.prevButton, this.state.isGCVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: 0, animated: false}) }}>
			   <Image source={require('./left.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			</View>


			<View style={this.state.isGCVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : ''}>
			<View style={styles.screenContainer}>
				<Text style={[styles.textContainer, this.state.isGCVisible ? {backgroundColor: '#404040'} : '']}>
					Help me by connecting Google Calendar!
				</Text>
				<TouchableOpacity
					style={styles.infoPopupContainer}
					activeOpacity={.2}
					onPress={() => {this.getModal(true, false)}}>
					<Text style={styles.infoPopupText}>
						Why do this?
					</Text>
				</TouchableOpacity>
			</View>
			<View style={styles.backgroundModal}>
				<Modal animationType = {"fade"} transparent = {true}
					visible = {this.state.isGCVisible}>
					<View style = {styles.modalContainer}>
						<Text style={styles.modalText}>Why Google Calendar?</Text>
						<Text style={styles.modalBody}>I use Google Calendar to optimize my recommendations to work better with any plans that you already have set.</Text>
						<TouchableHighlight style={styles.modalExit} onPress = {() => {
							this.getModal(!this.state.isGCVisible, false)}}>
							<Text style={styles.modalExitText}>X</Text>
						</TouchableHighlight>
					</View>
				</Modal>
			</View>
			<View style={styles.globeContainer}>
				<Image source={this.state.isGCVisible ? require('../globe_grayscale.png') : require('../globe.png')} style={styles.globePosition}/>
			</View>
			<View style={styles.buttonContainer}>
					<TouchableWithoutFeedback>
						<View style={styles.GCalButtonPressed}>
						<View style={{
					position: 'absolute',
					top: 5,
					height: 15,
					width: screenWidth * .9,
					marginTop: 0,
					backgroundColor: '#7283b8',
				    alignSelf: 'center',
				    shadowColor: 'rgba(0, 0, 0, 0.7)',
				    shadowOffset: {
				      width: 0,
				      height: -5
				    },
				    borderRadius: 10,
				    shadowRadius: 2,
				    shadowOpacity: .4
				}}>
				</View>
				<View style={{
					position: 'absolute',
					left: 4,
					top: 6,
					height: 74,
					width: 10,
					marginTop: 0,
					backgroundColor: '#7283b8',
				    shadowColor: 'rgba(0, 0, 0, 0.7)',
				    shadowOffset: {
				      width: -5,
				      height: 0,
				    },
				    borderRadius: 10,
				    shadowRadius: 2,
				    shadowOpacity: .4
				}}>
				</View>
						<Image source={require("./gcal.png")} style={styles.optionImage2}/>
						<Text style={styles.optionLabel}>
							Connect Google Calendar
						</Text>
						</View>
					</TouchableWithoutFeedback>
			</View>
			<View style={{alignItems: 'center', justifyContent: 'center'}}>
				<Text style={{fontSize: 16, fontWeight: 'bold'}}>
					Successfully Connected!
				</Text>
			</View>
			<TouchableOpacity style={[styles.prevButton, this.state.isGCVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: screenWidth * 2, animated: false}) }}>
			   <Image source={require('./left.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			<TouchableOpacity style={[styles.nextButton, this.state.isGCVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: screenWidth * 4, animated: false}) }}>
			   <Image source={require('./right.png')} style={styles.nextObject}/>
			 </TouchableOpacity>
			</View>



			<View style={this.state.isLocVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : ''}>
			<View style={styles.screenContainer}>
				<Text style={[styles.textContainer, this.state.isLocVisible ? {backgroundColor: '#404040'} : '']}>
					Help me by sharing your location!
				</Text>
				<TouchableOpacity
					style={styles.infoPopupContainer}
					activeOpacity={.2}
					onPress={() => {this.getLocModal(true)}}>
					<Text style={styles.infoPopupText}>
						Why do this?
					</Text>
				</TouchableOpacity>
			</View>
			<View style={styles.backgroundModal}>
				<Modal animationType = {"fade"} transparent = {true}
					visible = {this.state.isLocVisible}>
					<View style = {styles.modalContainer}>
						<Text style={styles.modalText}>Why Share Your Location?</Text>
						<Text style={styles.modalBody}>I use your location to provide personalized recommendations right around you as you’re traveling.</Text>
						<TouchableHighlight style={styles.modalExit} onPress = {() => {
							this.getLocModal(!this.state.isLocVisible)}}>
							<Text style={styles.modalExitText}>X</Text>
						</TouchableHighlight>
					</View>
				</Modal>
			</View>
			<View style={styles.globeContainer}>
				<Image source={this.state.isLocVisible ? require('../globe_grayscale.png') : require('../globe.png')} style={styles.globePosition}/>
			</View>
			<View style={styles.buttonContainer}>
				<TouchableOpacity
					style={styles.laterButton}
					activeOpacity={.8}
					onPress={() => { this.scroll.scrollTo({ x: screenWidth * 5, animated: false }) }}>
					<Text style={styles.laterLabel}>
						Share Location
					</Text>
				</TouchableOpacity>
			</View>
			<TouchableOpacity style={[styles.prevButton, this.state.isLocVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: screenWidth * 2, animated: false}) }}>
			   <Image source={require('./left.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			</View>




			<View style={this.state.isLocVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : ''}>
			<View style={styles.screenContainer}>
				<Text style={[styles.textContainer, this.state.isLocVisible ? {backgroundColor: '#404040'} : '']}>
					Help me by sharing your location!
				</Text>
				<TouchableOpacity
					style={styles.infoPopupContainer}
					activeOpacity={.2}
					onPress={() => {this.getLocModal(true)}}>
					<Text style={styles.infoPopupText}>
						Why do this?
					</Text>
				</TouchableOpacity>
			</View>
			<View style={styles.backgroundModal}>
				<Modal animationType = {"fade"} transparent = {true}
					visible = {this.state.isLocVisible}>
					<View style = {styles.modalContainer}>
						<Text style={styles.modalText}>Why Share Your Location?</Text>
						<Text style={styles.modalBody}>I use your location to provide personalized recommendations right around you as you’re traveling.</Text>
						<TouchableHighlight style={styles.modalExit} onPress = {() => {
							this.getLocModal(!this.state.isLocVisible)}}>
							<Text style={styles.modalExitText}>X</Text>
						</TouchableHighlight>
					</View>
				</Modal>
			</View>
			<View style={styles.globeContainer}>
				<Image source={this.state.isLocVisible ? require('../globe_grayscale.png') : require('../globe.png')} style={styles.globePosition}/>
			</View>
			<View style={styles.buttonContainer}>
					<TouchableWithoutFeedback>
						<View style={styles.laterButtonPressed}>
						<View style={{
							position: 'absolute',
							top: 5,
							height: 15,
							width: screenWidth * .9,
							marginTop: 0,
							backgroundColor: '#E0C465',
						    alignSelf: 'center',
						    shadowColor: 'rgba(0, 0, 0, 0.7)',
						    shadowOffset: {
						      width: 0,
						      height: -5
						    },
						    borderRadius: 10,
						    shadowRadius: 2,
						    shadowOpacity: .4
						}}>
						</View>
						<View style={{
							position: 'absolute',
							left: 4,
							top: 6,
							height: 70,
							width: 10,
							marginTop: 0,
							backgroundColor: '#E0C465',
						    shadowColor: 'rgba(0, 0, 0, 0.7)',
						    shadowOffset: {
						      width: -5,
						      height: 0,
						    },
						    borderRadius: 10,
						    shadowRadius: 2,
						    shadowOpacity: .4
						}}>
						</View>
						<Text style={styles.laterLabel}>
							Share Location
						</Text>
						</View>
					</TouchableWithoutFeedback>
			</View>
			<View style={{alignItems: 'center', justifyContent: 'center'}}>
				<Text style={{fontSize: 16, fontWeight: 'bold'}}>
					Successfully Shared Location!
				</Text>
			</View>
			<TouchableOpacity style={[styles.prevButton, this.state.isLocVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => { this.scroll.scrollTo({ x: screenWidth * 4, animated: false}) }}>
			   <Image source={require('./left.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			<TouchableOpacity style={[styles.nextButton, this.state.isLocVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']} onPress={() => {this.props.navigation.navigate('GlobeOutro', { preferences: this.state.preferencesArray, calendarSync: this.state.calendarSync})} }>
			   <Image source={require('./right.png')} style={styles.nextObject}/>
			 </TouchableOpacity>
			</View>



		</ScrollView>
		);
	}
}

export default SocialIntegration;
