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 GoogleMaps extends Component {
  static navigationOptions = {
    headerShown: false,
    gesturesEnabled: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      preferences: this.props.navigation.getParam("preferences"),
      activityIndex: this.props.navigation.getParam("activityIndex"),
      visitedList: this.props.navigation.getParam("visitedList"),
      avoidList: this.props.navigation.getParam("avoidList"),
      calendarSync: this.props.navigation.getParam("calendarSync"),
      fromSettings: this.props.navigation.getParam("fromSettings"),
    };
    this.createPassword = this.createPassword.bind(this);
    console.log("TEST")
    console.log(this.state.preferences)
    console.log(this.state.activityIndex)
    console.log(this.state.visitedList)
    console.log(this.state.avoidList)
    console.log(this.state.calendarSync)
  }

  componentWillMount(){
    AsyncStorage.clear();
  }

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


  useGoBackButton(){
    if (this.state.fromSettings === true){
      this.props.navigation.navigate('PastExperiences', { fromSettings: this.state.fromSettings, calendarSync: this.state.calendarSync, preferences: this.state.preferences, visitedList: this.state.visitedList, avoidList: this.state.avoidList })
    } else {
      this.props.navigation.navigate('Activity', { calendarSync: this.state.calendarSync, preferences: this.state.preferences, activityIndex: this.state.activityIndex, visitedList: this.state.visitedList, avoidList: this.state.avoidList })
    }
  }
//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}>
        <View style={styles.globeGroupContainer}>
          <Text style={styles.globeText}>
             Let's go! Can I open up Google Maps?
          </Text>
          <Image source={require('../globe.png')} style={styles.globePosition}/>
        </View>
        <View style={{position: 'absolute', width: Dimensions.get('window').width - 36, top: 658, flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
          <TouchableOpacity
            style={styles.backButton}
            activeOpacity={.8}
            onPress={() => { this.useGoBackButton() }}
          >
            <Text style={styles.startText}>
              Go Back
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.startButton}
            activeOpacity={.8}
            onPress={() => { this.props.navigation.navigate('Feedback', { fromSettings: this.state.fromSettings, calendarSync: this.state.calendarSync, preferences: this.state.preferences, activityIndex: this.state.activityIndex, visitedList: this.state.visitedList, avoidList: this.state.avoidList }) }}
          >
            <Text style={styles.startText}>
              Yes
            </Text>
          </TouchableOpacity>
        </View>
      </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)(GoogleMaps);
