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 {NavigationEvents} from 'react-navigation';

// Sources:
// Slier Tutorial: https://www.skptricks.com/2019/05/react-native-full-width-horizontal-scrollview.html
// https://stackoverflow.com/questions/49458226/react-native-react-navigation-rerender-panel-on-goback

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

  constructor(props) {
    super(props);
    this.state = {
      signIsVisible: 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"),
    };
    console.log(this.state.calendarSync)
    console.log(this.state.preferences)
    this.borderContents = ['Past Experiences', 'Calendar Connect', 'Help', 'Sign Out'];
    this.buildRows = this.buildRows.bind(this);
    this.buildTopView = this.buildTopView.bind(this);
    this.buildOneRow = this.buildOneRow.bind(this);
    this.handleButtonClickBound = event => this.setButtonFunction(event);

  }

  componentWillMount(){
    AsyncStorage.clear();
  }

  screenAppears(){
    this.setState({ preferences: this.props.navigation.getParam("preferences"), calendarSync: this.props.navigation.getParam("calendarSync"), visitedList: this.props.navigation.getParam("visitedList"), avoidList: this.props.navigation.getParam("avoidList")})
  }

  // https://stackoverflow.com/questions/44191760/getting-the-id-of-a-react-native-element-in-event-handler
  setButtonFunction(event, index){
    if (index === 0){
      console.log("Past Experiences")
      this.props.navigation.navigate("PastExperiences", {preferences: this.state.preferences, calendarSync: this.state.calendarSync, visitedList: this.state.visitedList, avoidList: this.state.avoidList})
    } else if (index === 1){
      console.log("Calendar Connect")
      this.props.navigation.navigate("CalendarConnect", {preferences: this.state.preferences, calendarSync: this.state.calendarSync, visitedList: this.state.visitedList, avoidList: this.state.avoidList})
    } else if (index === 2){
      console.log("FAQ")
      this.props.navigation.navigate("HelpPage", {preferences: this.state.preferences, calendarSync: this.state.calendarSync, visitedList: this.state.visitedList, avoidList: this.state.avoidList})
    } else {
      this.setState({ signIsVisible: true })
      console.log("Sign Out")
    }
  }

  buildOneRow(index){
    return (
      <View key={index} style={this.state.signIsVisible ? {borderBottomWidth: 1, borderColor: 'rgba(0,0,0,0.5)',} : {borderBottomWidth: 1, borderColor: '#B7BABC'}}>
        <TouchableOpacity  style={this.state.signIsVisible ? styles.greyRowView : styles.rowView} onPress={(e) => this.setButtonFunction(e,index)}>
          <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
            <Text style={this.state.signIsVisible ? styles.greyTextStyle : styles.textStyle}>
              {this.borderContents[index]}
            </Text>
            <View key={index} style={this.state.signIsVisible ? styles.greyButtonStyle : styles.buttonStyle}>
              <Image source={require('../../chevron.png')} style={styles.arrowStyle}/>
            </View>
          </View>
        </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={this.state.signIsVisible ? require('../../happyGrey.png') : require('../../happy.jpg')} style={styles.profileImage}/>
          <Text style={this.state.signIsVisible ? styles.greyTopTextStyle : styles.topTextStyle}>
            Your Profile
          </Text>
        </View>
        <TouchableOpacity style={this.state.signIsVisible ? styles.greyTopButtonStyle : styles.topButtonStyle} onPress={() => this.props.navigation.navigate("Home", {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>
    );
  }

  logOut(){
    this.setState({ signIsVisible: false });
    this.props.navigation.navigate("Start");
  }

  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={this.state.signIsVisible ? {backgroundColor: 'rgba(0,0,0,0.5)'} : styles.container}>
        <Modal animationType = {"fade"} transparent = {true}
          visible = {this.state.signIsVisible}>
          <View style = {styles.modalContainer}>
            <Image source={require('../../globe.png')} style={styles.globePosition}/>
            <Text style={styles.modalBody}>
              Are you sure you want to sign out?
            </Text>
            <TouchableOpacity style={styles.cancelButton} onPress={() => this.setState({ signIsVisible: false })}>
              <Text style={styles.signOutText}>
                No
              </Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.signOutButton} onPress={() => this.logOut()}>
              <Text style={styles.signOutText}>
                Yes
              </Text>
            </TouchableOpacity>
          </View>
        </Modal>
        <View style={this.state.signIsVisible ? styles.greyTopView : styles.topView}>
          {this.buildTopView()}
        </View>
        {this.buildRows()}
        <View style={{height:400}}>
        </View>
        <NavigationEvents onDidFocus={() => this.screenAppears()} />
      </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)(MainSettings);
