import React, {Component} from "react";
import {Image, Alert, Text, View, ScrollView, ActionSheetIOS, Picker, Platform, TouchableOpacity, Button, Dimensions, TextInput} from "react-native";
import styles from "./style";
import { connect } from 'react-redux';
import { increment, increment_other } from '../../actions';
import { AsyncStorage } from "react-native";
import {KeyboardAvoidingView} from 'react-native';

// Sources:
// Slier Tutorial: https://www.skptricks.com/2019/05/react-native-full-width-horizontal-scrollview.html

class GlobeOutro extends Component {
  static navigationOptions = {
    headerShown: false,
    gesturesEnabled: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      currText: "Picking the best travel recommendations for you...",
      preferencesArray: this.props.navigation.getParam("preferences"),
      calendarSync: this.props.navigation.getParam("calendarSync"),
    };
    console.log("GlobeOutro")
    console.log(this.state.preferencesArray)
  }

  componentWillMount(){
    AsyncStorage.clear();
  }

  createPassword(text){
    let passString = '';
    for (let i = 0; i < text.length; i++){
      passString += '*';                
    }
    this.setState({passwordText: passString});
  }


//The style here with container and screenContainer is not ideal
//I cannot figure out why the styling is so off at the moment if I remove one of them
  render() {
    const navigation = this.props.navigation;
    const increment = this.props.increment;
    const increment_other = this.props.increment_other;
    const i = this.props.i;
    const other = this.props.other;
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={true}>

          <View style={{width: Dimensions.get('window').width, alignItems: 'center'}}>
            <View style={styles.globeGroupContainer}>
              <Text style={styles.globeText}>
                I made recommendations customized just for you! Happy Travels!
              </Text>
              <Image source={require('../globe.png')} style={styles.globePosition}/>
            </View>
            <TouchableOpacity
              style={styles.startButton}
              activeOpacity={.8}
              onPress={() => { this.props.navigation.navigate('Home', { preferences: this.state.preferencesArray, calendarSync: this.state.calendarSync}) }}
            >
              <Text style={styles.startText}>
                Let's Go!
              </Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }
}



const mapStateToProps = (state) => {
    return {
      i: state.i,
      other: state.other,
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
      increment: () => dispatch(increment()),
      increment_other: () => dispatch(increment_other()),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(GlobeOutro);
