import React, {Component} from 'react';
import {KeyboardAvoidingView, SafeAreaView, ScrollView, View, Text, Alert, TouchableOpacity} from 'react-native'
import LinearGradient from 'react-native-linear-gradient';
import { forgetPassword } from '../../api/UserApi';
import { BackgroundImage } from '../../components/BackgroundImage';
import { CustomButton } from '../../components/CustomButton';
import { CustomInput } from '../../components/CustomInput';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n';

class ForgetPasswordScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mobile: '',
      isLoading: false
    }
  }

  submitForgetPassword = () => {
    this.setState({
      isLoading: true
    }, () => {
      forgetPassword(this.state.mobile)
      .then(res => {
        if(res.data && res.data.success){
          Alert.alert(t('success'), t('check_otp_msg'), [
            {
              text: 'OK',
               onPress: () => {
                this.props.navigation.navigate('VerifyOTP', {token: res.data.token, mobile: this.state.mobile})
                this.setState({
                  isLoading: false
                })
              }
            }
          ])
        }else {
          let message = res && res.data && res.data.message ? res.data.message : '';
          Alert.alert(t('unsuccessful'), message)
          this.setState({
            isLoading: false
          })
        }
      })
    })
    
  }

  render() {
    return (
      <SafeAreaView style={{flex: 1}}>
        <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
          flex: 1,
          width: null,
          height: null,
          resizeMode: 'cover'
        }}>
          <BackgroundImage>
            <KeyboardAvoidingView style={{flex:1}}
             keyboardVerticalOffset={Platform.OS == 'ios' ? 70 : 0} 
             behavior={Platform.OS == 'ios' ? "padding" : ""} enabled>
                <View style={styles.container}>
                  <View style={{flex: 0.7}}>
                    <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
                      <View>
                        <Text style={[styles.textStyle, {fontSize: 28, fontFamily: 'Prompt-Bold'}]}>
                        {t('forget_password')}
                        </Text>
                        <Text style={[styles.textStyle, {fontSize: 18, fontFamily: 'Prompt-Regular'}]}>
                          {t('enter_phone_no')}
                        </Text>                   
                        <Text style={[styles.textStyle, {fontSize: 18, fontFamily: 'Prompt-Regular'}]}>
                          {t('receive_otp')}
                        </Text>
                        {/* <Text style={[styles.textStyle, {fontSize: 18}]}>
                          กรุณากรอกอีเมล ระบบจะส่งลิงก์
                        </Text>
                        <Text style={[styles.textStyle, {fontSize: 18}]}>
                          สำหรับเปลี่ยนรหัสผ่านให้กับท่าน
                        </Text> */}
                      </View>
                      
                      <View style={{marginVertical: 20}}>
                        <View style={{flexDirection: 'row', flex: 1}}>
                          <CustomInput
                            onChangeText={(e) => {
                              this.setState({
                                mobile: e
                              })
                            }}
                            inputTextAlign={'left'}
                            iconName={'phone'}
                            iconType={'fontAwesome'}
                            placeholder={t('phone')}
                            placeholderTextColor={'#FFFFFF40'}
                            keyboardType='numeric'
                            maxLength={10}
                            style={styles.form_input} />
                        </View>
                      </View>
                    </View>
                  </View>
                 
                 

                  <View style={{flex: 0.3, width: '100%', marginTop: 20}}>
                    <View style={{height: 48}}>
                      <TouchableOpacity onPress={this.submitForgetPassword}
                        style={styles.btnSubmit}
                        disabled={this.state.mobile === ''}
                      >
                        <Text style={styles.textBtnSubmit}>
                          {t('confirm')}
                        </Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </View>

                <View style={{position: 'absolute', bottom: 20, flex: 1, width: '100%', flexDirection: 'row', justifyContent:'center'}}>
                  <Text style={{color: 'white', textAlign: 'center', marginRight: 10, fontSize: 14, fontFamily: 'Prompt-Regular'}}>{t('back_to')}</Text>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('HomeScreen')}>
                      <Text style={{color: 'white', fontFamily: 'Prompt-Bold', fontSize: 14}}>{t('login')}</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
          </BackgroundImage>
          <IndicatorLoading loadingVisible={this.state.isLoading}/>
        </LinearGradient>
      </SafeAreaView>
    )
  };
}

const styles = {
  container: {
    flex: 1, 
    justifyContent: 'center',
    alignItems: 'center', 
    padding: 40
  },
  textStyle: {
    color: 'white',
    textAlign: 'center'
  },
  form_input: {
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: 'white', borderRadius: 30,
    borderWidth: 1,
    width: '100%'
  },
  btnSubmit: {
    backgroundColor: 'white',
    borderRadius: 30,
    paddingVertical: 10,
    paddingHorizontal: 50,
    flex: 1,
    height: 50,
  },
  textBtnSubmit: {
    color: '#2470A1',
    fontFamily: 'Prompt-Bold',
    fontSize: 16,
    textAlign: 'center'
  }
}

export default ForgetPasswordScreen;