import React, {Component} from "react";
import {Image, Alert, Text, View, 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 { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

// Sources:
// https://reactnativecode.com/create-custom-rectangle-square-shape-view/
// https://stackoverflow.com/questions/33804500/screen-width-in-react-native
// React github Documentation
// Shadows: https://stackoverflow.com/questions/45972506/creating-a-ui-with-box-shadow-in-react-native
// Default keyboard: https://lefkowitz.me/visual-guide-to-react-native-textinput-keyboardtype-options/

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

  constructor(props) {
    super(props);
    this.state = {
      nameText: '',
      emailText: '',
      passwordText: '',
    };
    this.createPassword = this.createPassword.bind(this);
  }

  componentWillMount(){
    AsyncStorage.clear();
  }

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

  /*
  [Unhandled promise rejection: Error: Failed to delete storage directory.Error Domain=NSCocoaErrorDomain Code=4 "“RCTAsyncLocalStorage” couldn’t be removed." UserInfo={NSFilePath=/Users/jbwoo/Library/Developer/CoreSimulator/Devices/261EB417-83AD-436F-B65C-0A5A1406A7FD/data/Containers/Data/Application/23129A1A-F7C6-493A-96DD-6B3C72AC71DD/Documents/ExponentExperienceData/%40anonymous%2Fbiolerplate-85f5c6e3-fc47-469c-b4e7-ff5d80fe07f9/RCTAsyncLocalStorage, NSUserStringVariant=(]
- node_modules/react-native/Libraries/Storage/AsyncStorage.js:347:24 in convertError
- node_modules/react-native/Libraries/Storage/AsyncStorage.js:142:30 in <unknown>
*/
  enterApp(navigation){
    if (this.state.nameText.length > 0 && this.state.emailText.length > 0 && this.state.passwordText.length > 0){
      navigation.navigate('GlobeIntro');
    } else {
      console.log("Provide proper error messaging");
    }
    
  }

//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 (
      <KeyboardAvoidingView style={styles.container} behavior='position' enabled>
        <View style={styles.screenContainer}>
          <View style={styles.logo}>
            <Image source={require('../logo.png')} style={{
              width: 300,
              resizeMode: 'center',
              height: 100,
            }}/>
          </View>
          <View style={styles.globeRectangle}>
            <Image source={require('../globe.png')} style={styles.globePosition}/>
            <Text style={styles.accountText}>
              Create an Account
            </Text>
          </View>
          
          <View style={styles.loginContainer}>
            <View>
              <Text style={styles.loginText}>
                Name
              </Text>
              <View style={styles.innerContainer}>
                <View style={styles.inputRectangle}>
                  <TextInput
                    style={
                      {
                        paddingLeft: 5,
                        paddingBottom: 2,
                        fontSize: 18,
                        fontFamily: 'Arial',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                      }
                    }
                    placeholder= 'e.g. Toasty'
                    keyboardType="email-address"
                    returnKeyType="done"
                    onChangeText={(text) => this.setState({nameText: text})}
                    value={this.state.nameText}
                  />
                </View>
              </View>
            </View>
            <View>
              <Text style={styles.loginText}>
                Email
              </Text>
              <View style={styles.innerContainer}>
                <View style={styles.inputRectangle}>
                  <TextInput
                    style={
                      {
                        paddingLeft: 5,
                        paddingBottom: 2,
                        fontSize: 18,
                        fontFamily: 'Arial',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                      }
                    }
                    placeholder= 'e.g. toast@stanford.edu'
                    keyboardType="email-address"
                    returnKeyType="done"
                    onChangeText={(text) => this.setState({emailText: text})}
                    value={this.state.emailText}
                  />
                </View>
              </View>
            </View>
            <View>
              <Text style={styles.loginText}>
                Password
              </Text>
              <View style={styles.innerContainer}>
                <View style={styles.inputRectangle}>
                  <TextInput
                    style={
                      {
                        paddingLeft: 5,
                        paddingBottom: 2,
                        fontSize: 18,
                        fontFamily: 'Arial',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                      }
                    }
                    placeholder= 'e.g. superStrongPassword'
                    keyboardType="email-address"
                    returnKeyType="done"
                    onChangeText={(text) => this.createPassword(text)}
                    value={this.state.passwordText}
                  />
                </View>
              </View>
            </View>
            <View style={{alignItems: 'center'}}>
              <TouchableOpacity
                style={styles.startButton}
                activeOpacity={.8}
                onPress={() => this.props.navigation.navigate('GlobeIntro')}
              >
               <Text style={styles.startText}>
                Get Started
              </Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </KeyboardAvoidingView>
    );
  }
}



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