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';
import products  from './products';

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

class FeedbackOutro 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"),
      noVisit: this.props.navigation.getParam('noVisit'),
      fromSettings: this.props.navigation.getParam("fromSettings"),
    };
    this.createPassword = this.createPassword.bind(this);
    console.log("Hi")
    console.log(this.state.visitedList)
    console.log(this.state.preferences)
    console.log(this.state.activityIndex)
    console.log(this.state.avoidList)
    console.log(this.state.calendarSync)
  }

  componentWillMount(){
    AsyncStorage.clear();
  }

  componentDidMount(){
    if (this.state.noVisit === true){
      return
    }

    for (let i = 0; i < this.state.visitedList.length - 1; i++){
      visitItem = this.state.visitedList[i]
      visitIndex = Object.keys(visitItem)[0]
      if (visitIndex === this.state.activityIndex){
        visitUpdateList = this.state.visitedList
        visitUpdateList.pop()
        this.setState({visitedList: visitUpdateList})
        return
      }
    }

    avoidance = this.state.avoidList
    noAdd = false
    for (let i = 0; i < avoidance.length; i++){
      if (avoidance[i] === this.state.activityIndex){
        noAdd = true
        break
      }
    }
    if (noAdd === false){
      avoidance.push(this.state.activityIndex)
    }
    lastVisit = this.state.visitedList[this.state.visitedList.length - 1]
    ratingScore = lastVisit[this.state.activityIndex]
    activityScore = products[this.state.activityIndex].values
    maxScore = -1
    maxIndex = -1
    for (let i = 0; i < activityScore.length; i++){
      if (activityScore[i] > maxScore){
        maxScore = activityScore[i]
        maxIndex = i 
      }            
    }
    console.log(maxScore)
    console.log(maxIndex)
    preferenceScore = this.state.preferences
    if (ratingScore >= 4){
      preferenceScore[maxIndex] = preferenceScore[maxIndex] * 2
    } else if (ratingScore < 3 && ratingScore > 0){
      preferenceScore[maxIndex] = preferenceScore[maxIndex] / 4
    }
    
    console.log("whoa")
    console.log(preferenceScore)
    console.log(avoidance)
    this.setState({ preferences: preferenceScore, avoidList: avoidance})
  }

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


  renderHeaderText(fromSettings){
    if(fromSettings === true){
      return (
        <Text style={styles.globeText}>
          Let's go back to the main screen!
        </Text>
      );
    } else {
      return (
        <Text style={styles.globeText}>
          Ready to see your next batch of travel recommendations?
        </Text>
      );
    }
  }
//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}>
          {this.renderHeaderText(this.state.fromSettings)}
          <Image source={require('../globe.png')} style={styles.globePosition}/>
        </View>
        <TouchableOpacity
          style={styles.startButton}
          activeOpacity={.8}
          onPress={() => { this.props.navigation.navigate('Home', {preferences: this.state.preferences, calendarSync: this.state.calendarSync, activityIndex: this.state.activityIndex, visitedList: this.state.visitedList, avoidList: this.state.avoidList}) }}
        >
          <Text style={styles.startText}>
            Let's Go!
          </Text>
        </TouchableOpacity>
      </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)(FeedbackOutro);
