import React, {Component} from "react";
import {Image, Alert, Text, Modal, View, TouchableHighlight, 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:
// Slider Tutorial: https://www.skptricks.com/2019/05/react-native-full-width-horizontal-scrollview.html
//Adding end lines: https://stackoverflow.com/questions/32469570/how-can-i-insert-a-line-break-into-a-text-component-in-react-native
class FacebookConnect extends Component {
  static navigationOptions = {
    headerShown: false,
    gesturesEnabled: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      signIsVisible: false,
      unSyncSignIsVisible: false,
      isSynced: true,
    };
    this.buildTopView = this.buildTopView.bind(this);
    this.addConnectButton = this.addConnectButton.bind(this);

  }

  componentWillMount(){
    AsyncStorage.clear();
  }


  buildTopView(){
    return(
      <View>
        <View style={{alignItems: 'center'}}>
          <Image source={require('../../facebookSettings.png')} style={styles.profileImage}/>
          <Text style={(this.state.signIsVisible || this.state.unSyncSignIsVisible) ? styles.greyTopTextStyle : styles.topTextStyle}>
            Facebook
          </Text>
        </View>
        <TouchableOpacity style={(this.state.signIsVisible || this.state.unSyncSignIsVisible) ? styles.greyTopButtonStyle : styles.topButtonStyle} onPress= {() => this.props.navigation.goBack()}>
          <Image source={require('../../thinArrow.png')} style={styles.topArrowStyle}/>
        </TouchableOpacity>
      </View>
    );
  }

  handleButtonSync(){
    if (this.state.isSynced === true){
      this.setState({ unSyncSignIsVisible: true })
      //this.setState({ isSynced: false });
      // Update Logic with home screen
    } else {
      this.setState({ isSynced: true });
      // Update Logic with Home screen
    }
  }

  addConnectButton(){
    if (this.state.isSynced === true){
      return(
        <View style={{position: 'absolute', top: 512}}>
          <TouchableOpacity style={this.state.unSyncSignIsVisible ? styles.greyConnectButton : styles.connectButton} onPress={() => this.handleButtonSync()}>
            <Image source={{uri: "https://image.flaticon.com/icons/png/512/124/124010.png"}} style={this.state.unSyncSignIsVisible ? styles.greyOptionImage : styles.optionImage}/>
            <Text style={this.state.unSyncSignIsVisible ? styles.greyOptionLabel : styles.optionLabel}>
              Unsync Facebook
            </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return(
        <View style= {{position: 'absolute', top: 512}}>
          <TouchableOpacity style={this.state.signIsVisible ? styles.greyConnectButton : styles.connectButton} onPress={() => this.handleButtonSync()}>
            <Image source={{uri: "https://image.flaticon.com/icons/png/512/124/124010.png"}} style={this.state.signIsVisible ? styles.greyOptionImage : styles.optionImage}/>
            <Text style={this.state.signIsVisible ? styles.greyOptionLabel : styles.optionLabel}>
              Sync Facebook
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.infoPopupContainer}
            activeOpacity={.2}
            onPress={() => this.setState({ signIsVisible: true })}>
            <Text style={styles.infoPopupText}>
              Why do this?
            </Text>
          </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 (
      <View style={(this.state.signIsVisible || this.state.unSyncSignIsVisible) ? {backgroundColor: 'rgba(0,0,0,0.5)', flex: 1, alignItems: 'center'} : styles.container}>
        <View style={(this.state.signIsVisible || this.state.unSyncSignIsVisible) ? styles.greyTopView : styles.topView}>
          {this.buildTopView()}
        </View>
        {this.addConnectButton()}
        <Modal animationType = {"fade"} transparent = {true}
          visible = {this.state.signIsVisible}>
          <View style = {styles.modalContainer}>
            <Image source={require('../../globe.png')} style={styles.globePosition}/>
            <Text style={styles.modalText}>
            Why do we ask for Facebook?
            </Text>
            <Text style={styles.modalBody}>
            I connect with Facebook so that I can learn from what you and your friends have done before to provide better spontaneous recommendations.
            </Text>
            <TouchableHighlight style={styles.modalExit} onPress = {() => this.setState({ signIsVisible : false })}>
              <Text style={styles.modalExitText}>X</Text>
            </TouchableHighlight>
          </View>
        </Modal>
        <Modal animationType = {"fade"} transparent = {true}
          visible = {this.state.unSyncSignIsVisible}>
          <View style = {styles.modalUnsyncContainer}>
            <Image source={require('../../globe.png')} style={styles.globeUnsyncPosition}/>
            <Text style={styles.modalUnsyncBody}>
              Your Facebook is currently connected. I use it to improve my recommendations based on your friends' activity.{"\n"}{"\n"}Unsyncing Facebook will make it more difficult for me to create the best recommendations for you possible. 
            </Text>
            <TouchableOpacity style={styles.keepButton} onPress={() => this.setState({ unSyncSignIsVisible: false })}>
              <Text style={styles.syncText}>
                Keep Synced
              </Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.leaveButton} onPress={() => this.setState({ unSyncSignIsVisible: false, isSynced: false })}>
              <Text style={styles.syncText}>
                Unsync
              </Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </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)(FacebookConnect);
