import React, {Component} from "react";
import {Image, Alert, Text, Modal, View, TouchableWithoutFeedback, 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 HelpPage extends Component {
  static navigationOptions = {
    headerShown: false,
    gesturesEnabled: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      //temp hard coding replace with backend array
      locationNames: [],
      // temp hard coding
      imageNames: [],
      activityIndices: [],
      lastReviews: [],
      calendarSync: this.props.navigation.getParam("calendarSync"),
      visitedList: this.props.navigation.getParam("visitedList"),
      avoidList: this.props.navigation.getParam("avoidList"),
      preferences: this.props.navigation.getParam("preferences"),
    };
    console.log(this.state.visitedList)
    this.buildRows = this.buildRows.bind(this);
    this.buildTopView = this.buildTopView.bind(this);
    this.buildOneRow = this.buildOneRow.bind(this);

  }

  componentWillMount(){
    AsyncStorage.clear();
  }

  componentDidMount(){
    locationNames = []
    imageNames = []
    activityIndices = []
    lastReviews = []
    console.log(this.state.visitedList)
    for (var i = 0; i < this.state.visitedList.length; i++) {
      activityObj = this.state.visitedList[i]
      activityIndex = Object.keys(activityObj)[0]
      console.log(activityObj)
      lastReview = activityObj[activityIndex]
      locationNames[i] = products[activityIndex].title
      console.log(products[activityIndex].image)
      imageNames[i] = { uri: products[activityIndex].image }
      activityIndices[i] = activityIndex
      lastReviews[i] = lastReview
    }
    console.log(imageNames)
    this.setState({ locationNames: locationNames, imageNames: imageNames, activityIndices: activityIndices, lastReviews: lastReviews})
  }

  rateAgain(index){
    // A placeholder for now
    location = this.state.locationNames[index]
    this.props.navigation.navigate('Feedback', { fromSettings: true, calendarSync: this.state.calendarSync, preferences: this.state.preferences, activityIndex: this.state.activityIndices[index], visitedList: this.state.visitedList, avoidList: this.state.avoidList, lastReview: this.state.lastReviews[index]})
  }

  goAgain(index){
    location = this.state.locationNames[index]
    this.props.navigation.navigate('GoogleMaps', { fromSettings: true, preferences: this.state.preferences, calendarSync: this.state.calendarSync, activityIndex: this.state.activityIndices[index], visitedList: this.state.visitedList, avoidList: this.state.avoidList, lastReview: this.state.lastReviews[index]})
  }

  buildOneRow(index){
    return (
      <View key={index} >
        <View style={styles.rowView}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
            <Text style={styles.topLocationTextStyle}>
              {this.state.locationNames[index]}
            </Text>
          </View>
          <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
            <Image source={this.state.imageNames[index]} style={styles.locationPicture}/>
            <View style={{height: 114, flexDirection: 'column', justifyContent: 'space-around', alignItems: 'center'}}>
              <TouchableOpacity style={styles.reviewLocationButton} onPress={() => this.rateAgain(index)}>
                <Text style={styles.reviewLocationText}>
                  New Rating
                </Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.reviewLocationButton} onPress={() => this.goAgain(index)}>
                <Text style={styles.reviewLocationText}>
                  Go Again
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }

  buildRows(){
    let rowValues = [];
    for (var i = 0; i < this.state.locationNames.length; i++) {
        rowValues[i] = this.buildOneRow(i)
    }
    return rowValues
  }

  buildTopView(){
    return(
      <View>
        <View style={{alignItems: 'center'}}>
          <Image source={require('../../pastExperiences.png')} style={styles.profileImage}/>
          <Text style={styles.topTextStyle}>
            Past Experiences
          </Text>
        </View>
        <TouchableOpacity style={styles.topButtonStyle} onPress={() => this.props.navigation.navigate("MainSettings", {preferences: this.state.preferences, calendarSync: this.state.calendarSync, visitedList: this.state.visitedList, avoidList: this.state.avoidList})}>
          <Image source={require('../../chevron.png')} style={styles.topArrowStyle}/>
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    console.log(this.state.activityIndices)
    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 (
      <ScrollView scrollEnabled={true}>
        <View style={styles.container}>
          <View style={styles.topView}>
            {this.buildTopView()}
          </View>
          {this.buildRows()}
        </View>
      </ScrollView>
    );
  }
}



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)(HelpPage);
