import React, {Component} from 'react'
import {TouchableOpacity, View, ScrollView, Alert, KeyboardAvoidingView, Platform} from 'react-native'
import Image from 'react-native-fast-image'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {CustomButton} from '../../components/CustomButton'
import {CustomInput} from '../../components/CustomInput'
import {CustomStepIndicator} from '../../components/StepIndicator'
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import {appSetUser} from '../../redux/app/action'
import {BackgroundImage_RegisterForm} from '../../components/BackgroundImage_RegisterForm'
import LinearGradient from 'react-native-linear-gradient';
import Text from '../../components/Text';
import { t } from '../../utils/i18n'

class RegisterScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {
      user: {}
    }
    this._onNextStep = this._onNextStep.bind()
  }

  _onNextStep = async () => {
    var regex = /^\d+$/;

    console.log('mobile ===> ', this.state.user)
    if (this.state.user.mobile && this.state.user.password && this.state.user.password && this.state.user.password_confirm) {
      if (regex.test(this.state.user.mobile) === false) {
        Alert.alert(null, t('phone_format_invalid'))
      } else if (this.state.user.password !== this.state.user.password_confirm){
        Alert.alert(null, t('pw_not_match'))
      } else {
        this.props.appSetUser(this.state.user)
        this.props.navigation.navigate('RegisterFormLogin');
      }
    } else {
      if(!this.state.user.mobile){
        Alert.alert(null, t('enter_phone_no'))
      } else if(!this.state.user.password){
        Alert.alert(null, t('enter_pw'))
      } else if(!this.state.user.password_confirm){
        Alert.alert(null, t('confirm_pw'))
      }
    }
  }

  render() {
    return (
      <LinearGradient colors={['#00420A', '#00420A']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <BackgroundImage_RegisterForm>
        <KeyboardAvoidingView style={{flex:1}} keyboardVerticalOffset={Platform.OS == 'ios' ? 75 : 0} behavior={Platform.OS == 'ios' ? "padding" : ""} enabled>
          <ScrollView showsVerticalScrollIndicator={false} style={{flex: 1}}>
            <View style={styles.container}>
              <View style={styles.step_indicator}><CustomStepIndicator currentStep={1} totalStep={3}/></View>
              <View style={styles.logo}>
                <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
                  flex: 1,
                  width: null,
                  height: null,
                  resizeMode: 'cover'
                }}>
                  <View style={{
                    flexGrow: 1, alignItems: 'center', paddingVertical: 10,
                  }}>
                    <Image
                      style={{width: 170, height: 170}}
                      source={require('../../../assets/images/logo_white_border.png')}
                    />
                    <View style={{marginTop: 10, alignItems: 'center', paddingBottom: 15}}>
                      <Text style={{fontSize: 28, color: '#FFF', fontFamily: 'Prompt-Medium'}}>เจริญสินธานี</Text>
                      <Text style={{fontSize: 18, color: '#FFF'}}>({t('room_for_rent')})</Text>
                    </View>
                  </View>
                </LinearGradient>
              </View>
              <View style={styles.form}>
                <View style={styles.row}>
                  <CustomInput
                    maxLength={10}
                    keyboardType="numeric"
                    style={[styles.register_input]}
                    inputTextAlign={'left'}
                    onChangeText={(mobile) => {
                      this.setState({
                        user: {
                          ...this.state.user,
                          mobile: mobile
                        }
                      })
                    }}
                    iconName={'ic_user'}
                    placeholder={t('phone')}
                    placeholderTextColor={'#FFFFFF40'}
                    value={this.state.user.mobile || ''}
                  />
                </View>
                <View style={styles.row}>
                  <CustomInput
                    style={[styles.register_input]}
                    inputTextAlign={'left'}
                    secureTextEntry={true}
                    iconName={'ic_key'}
                    placeholderTextColor={'#FFFFFF40'}
                    placeholder={t('password')}
                    onEndEditing={(e) => {
                      let password = e.nativeEvent.text
                      // console.log(password, this.state.user.password_confirm)
                      let hasError = false
                      if (this.state.user.password_confirm && password && this.state.user.password_confirm != password) {
                        // alert('Password not match.')
                        hasError = true
                      }
                      this.setState({
                        user: {
                          ...this.state.user,
                          password: password
                        },
                        error_password: hasError
                      })
                    }}
                  />
                </View>
                <View style={styles.row}>
                  <CustomInput
                    inputTextAlign={'left'}
                    secureTextEntry={true} iconName={'ic_key'}
                    style={[this.state.error_password ? styles.error_password : styles.password_confirm, styles.register_input]}
                    onEndEditing={
                      (password_confirm) => {
                        let hasError = false
                        let text = password_confirm.nativeEvent.text
                        // console.log(text, this.state.user.password)
                        if (this.state.user.password && text && text != this.state.user.password) {
                          hasError = true
                        }
                        this.setState({
                          user: {
                            ...this.state.user,
                            password_confirm: text
                          },
                          error_password: hasError
                        })
                      }
                    }
                    placeholderTextColor={'#FFFFFF40'}
                    placeholder={t('confirm_password_only')}/>
                </View>
                <View style={[styles.row, {marginTop: 15}]}>
                  <CustomButton style={[styles.btn_next_register]} title={t('next')} sizeText={14} onPress={this._onNextStep}/>
                </View>
                <View style={styles.buttons}>
                </View>
              </View>
            </View>
          </ScrollView>
          </KeyboardAvoidingView>
        </BackgroundImage_RegisterForm>
      </LinearGradient>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  logo: {
    height: '50%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',

  },
  step_indicator: {
    backgroundColor: '#3AA40C'
  },
  form: {
    flex: 1,
    padding: 10,
    marginTop: 15,
    paddingBottom: 0,
  },
  row: {
    flexDirection: 'row',
    marginBottom: 5,
  },
  error_password: {
    borderColor: 'red',
    borderWidth: 2
  },
  password_confirm: {
    borderWidth: 0
  },
  btn_next_register: {
    height: 40,
    backgroundColor: '#145EB3'
  },
  register_input: {
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 30,
  }
}


const setUser = dispatch => bindActionCreators({appSetUser}, dispatch)
export default connect(null, setUser)(RegisterScreen)
