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';

// 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 = {
      signIsVisible: false,
      expandArray: [false, false, false, false],
      calendarSync: this.props.navigation.getParam("calendarSync"),
      visitedList: this.props.navigation.getParam("visitedList"),
      avoidList: this.props.navigation.getParam("avoidList"),
      preferences: this.props.navigation.getParam("preferences"),
    };
    this.borderContents = ['What is yourway?', 'How do recommendations work?', 'How do I update my recommendations?', 'How do I see what you have learned about me?'];
    this.expandContents = ['yourway is a travel recommendation app that learns from you to help you figure out what to do next. I learn from your prior experiences and interests in order to recommend the best thing you should be doing in any given moment.',
                            'My travel recommendations are based on your answers to the survey, your reviews of activities, and what your friends have done before. I compute a match score for each activity and show you the top 3 matches.',
                            'From the home screen, click on the chat button to talk to me about the experiences I picked for you. Let me know what you want more or less of or how you are feeling and I will adjust my recommendations right away.',
                            'Open up a chat with me from the home screen. Click the \"What have you learned about me?\" button, and I will tell you what I have learned so far.']
    this.buildRows = this.buildRows.bind(this);
    this.buildTopView = this.buildTopView.bind(this);
    this.buildOneRow = this.buildOneRow.bind(this);

  }

  componentWillMount(){
    AsyncStorage.clear();
  }

  // https://stackoverflow.com/questions/44191760/getting-the-id-of-a-react-native-element-in-event-handler
  setButtonFunction(event, index){
    let newArray = this.state.expandArray;
    if (newArray[index] === true){
      newArray[index] = false;
    } else {
      newArray[index] = true;
    }
    this.setState({ expandArray: newArray });
  }

  expandInfo(index){
    if (this.state.expandArray[index] === true){
      return(
        <View style={styles.extraRowView}>
          <Text style={styles.expandText}>
            {this.expandContents[index]}
          </Text>
        </View>
      );
    }
  }

  buildOneRow(index){
    return (
      <View key={index} style={{borderTopWidth: 1, borderColor: '#B7BABC'}}>
      <TouchableOpacity onPress={(e) => this.setButtonFunction(e,index)}>
        <View style={styles.rowView}>
          <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
            <Text style={styles.textStyle}>
              {this.borderContents[index]}
            </Text>
            <View key={index} style={styles.buttonStyle}>
              <Image source={require('../../chevron.png')} style={this.state.expandArray[index] ? styles.expandArrowStyle : styles.arrowStyle}/>
            </View>
          </View>
        </View>
        {this.expandInfo(index)}
      </TouchableOpacity>
      </View>
    );
  }

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

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


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