import React, {Component, useCallback} from 'react';
import { TouchableOpacity, View, Alert, ScrollView, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native'
import Image from 'react-native-fast-image'
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import { CustomButton } from '../../components/CustomButton'
import { CustomInput } from '../../components/CustomInput'
import {login, payment} from '../../api/UserApi'
import { setToken } from '../../api/api'
import { BackgroundImage } from '../../components/BackgroundImage'
import LinearGradient from 'react-native-linear-gradient'
import Text from '../../components/Text'
import { bindActionCreators } from 'redux'
import {appSetDevice, appSetPushToken, appSetToken, appSetUser} from '../../redux/app/action'
import {connect} from 'react-redux'
import IndicatorLoading from '../../components/IndicatorLoading';
import { locale, t } from '../../utils/i18n'
import moment from "moment";
import messaging from "@react-native-firebase/messaging";

class LoginScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      username: null,
      password: null,
      payment: [],
      sum_payment: [],
      all_payment : [],
      room_number_array : [],
    }
    this._login = this._login.bind(this)
  }

  async _login () {
    this.setState({
      isLoading: true
    }, async () => {
      if (this.state.username && this.state.password) {
      var regex = /^\d+$/;

      if (regex.test(this.state.username) === true) {
        console.log('true')
        const fcm = messaging()
        if (!await fcm.hasPermission()) {
          try {
            await messaging().requestPermission()
          } catch (error) {
            this.setState({
              isLoading: false
            })
          }
        }

        const fcmToken = await messaging().getAPNSToken()
        

        let params = {
          // mobile: this.state.username,
          username: this.state.username,
          password: this.state.password,
          fcm_token: fcmToken
        }

        console.log('params >> ', params)
        // console.log('fcmToken >>>>>>>>>>>>>>>>>>>>>>>>> ', fcmToken)
        this.setState({isLoading:true})
        login(params)
          .then((res) => {
            if (res.ok) {
              if (res.data.access_token) {
                setToken(res.data.access_token)
                this.props.appSetToken(res.data.access_token)
                this.props.navigation.navigate('HomeScreen',{isLogin:true})
                let user_data = res.data.user;
                this.props.appSetUser(user_data)
              }
              this.setState({ isLoading: false })
            } else {
              setTimeout(() => {
                Alert.alert(null, 'ท่านกรอก บัญชีผู้ใช้งาน หรือ รหัสผ่านผิด')
              }, 600);
              this.setState({isLoading:false})
            }
          })
      } else {
        Alert.alert(null, 'ท่านกรอกรูปแบบโทรศัพท์ไม่ถูกต้อง')
      }
    } else {
      Alert.alert(null, 'กรุณากรอกข้อมูลให้ครบถ้วน')
    }
    })
    
  };

  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>
          <ScrollView showsVerticalScrollIndicator={true} style={{ flex: 1}}>
            <View style={styles.container}>

              <View style={styles.logo}>
                {/*<Text> Logo </Text>*/}
                <View style={{
                  flexGrow: 1, alignItems: 'center', justifyContent: 'center', paddingVertical: 10,
                }}>
                  <Image
                    style={{ width: 170, height: 170 }}
                    source={require('../../../assets/images/logo_white_border.png')}
                  />
                  <View style={{ marginTop: 5, alignItems: 'center', }}>
                    <Text style={{ fontSize: 28, color: '#FFF', fontFamily: 'Prompt-Medium' }}>เจริญสินธานี</Text>
                    <Text style={{ fontSize: 18, color: '#FFF' }}>({t('room_for_rent')})</Text>
                  </View>
                </View>
              </View>
              <View style={styles.form}>
                <View style={styles.row}>
                  <CustomInput
                    maxLength={10}
                    keyboardType="numeric"
                    onChangeText={(e) => {
                      this.setState({
                        username: e
                      })
                    }}
                    onEndEditing={(e) => {
                      this.setState({
                        username: e.nativeEvent.text
                      })
                    }}
                    inputTextAlign={'left'}
                    iconName={'ic_user'}
                    placeholder={t('phone')}
                    placeholderTextColor={'#FFFFFF40'}
                    style={styles.form_input} />
                </View>
                <View style={styles.row}>
                  <CustomInput

                    inputTextAlign={'left'}
                    secureTextEntry={true}
                    iconName={'ic_key'}
                    placeholder={t('password')}
                    placeholderTextColor={'#FFFFFF40'}
                    onChangeText={(e) => {
                      this.setState({
                        password: e
                      })
                    }}
                    onEndEditing={(e) => {
                      this.setState({
                        password: e.nativeEvent.text
                      })
                    }}
                    style={styles.form_input} />
                </View>
                <View style={{flex: 1, marginBottom: 10}}>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate('ForgetPassword')}>
                    <Text style={{color: '#FFF', fontSize: 15, textAlign: 'right'}}>{t('forget_password')}?</Text>
                  </TouchableOpacity>
                </View>
                <View style={[styles.row, { marginTop: 15 }]}>
                  <CustomButton
                    colorText={'#2470A1'}
                    weightText={'Prompt-Bold'}
                    title={t('login')}

                    sizeText={16}
                    style={[styles.btn_login]}
                    onPress={this._login}
                  //onPress={() => { this.props.navigation.navigate('HomeScreen') }}
                  />
                </View>
                {/* <View style={{marginTop:10}}>
                  <View style={[styles.row, { flex: 1, flexDirection: locale() == 'my' ? 'column' : 'row', alignItems: 'center', textAlign: 'center', justifyContent: 'center' }]}>
                    <Text style={{ color: '#FFF', fontSize: 15}}> {t('not_a_member')}  </Text>
                    <TouchableOpacity onPress={() => { this.props.navigation.navigate('Register') }}>
                      <Text style={{ color: '#FFF', fontSize: 15, fontFamily: 'Prompt-Bold' }}> {t('create_account')} </Text>
                    </TouchableOpacity>
                  </View>
                </View> */}
              </View>
            </View>
          </ScrollView>
          </KeyboardAvoidingView>
        </BackgroundImage>
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </LinearGradient>
      </SafeAreaView>
    )
  }
}

//export default LoginScreen
const mapDisPatchToProps = state => {
  return state.app
}
const setUser = dispatch => bindActionCreators({ appSetToken, appSetPushToken, appSetDevice, appSetUser }, dispatch)
export default connect(mapDisPatchToProps, setUser)(LoginScreen)

const styles = {
  container: {
    flex: 1,
    //backgroundColor: 'rgba(53, 151, 12,0.8)'||'#359234',

    // flexGrow: 1,
    // flexDirection: 'column',
    // height: GetWidthHeightDevice.HeightContainer

  },
  logo: {
    // flex: 2,
    // height: '50%',
    // flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    //backgroundColor: "rgba(53, 151, 12,0.3)"||'#359234',

  },
  form: {
    // height: '45%',
    flex: 1,
    padding: 30,
    paddingBottom: 0,
    // backgroundColor: 'red',
  },
  row: {
    // flex: 1,
    flexDirection: 'row',
    marginBottom: 5,
  },
  form_address: {
    // flex: 2,
    padding: 10,
    paddingBottom: 0,
    // backgroundColor:"green",
  },
  step_indicator: {
    // flex: 1,
  },
  buttons: {
    paddingLeft: 15,
    paddingRight: 15,
    flexGrow: 1,
    // padding: 10,
    // backgroundColor: 'red',
    // alignItems: 'center',
    // justifyContent: 'center',
    position: 'absolute',
    flexDirection: 'row',
    marginHorizontal: 15,
    bottom: 15,
    left: 25
  },
  row_grow: {
    flexGrow: 1,
    // marginLeft: 5
    // backgroundColor:"red",
  },
  row_grow_first: {
    flexGrow: 1,
    marginRight: 5,
    // backgroundColor:"blue",
  },
  headerTitle: {
    color: '#DA7A16',
    marginVertical: 5

  },
  form_input: {
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: 'white', borderRadius: 30,
    borderWidth: 1,
  },
  btn_login: {
    backgroundColor: 'white',
    borderRadius: 30, width: '100%',

  }, btn_login_fb: {
    marginLeft: 10,
    backgroundColor: '#3b5998',
    borderRadius: 30, width: '20%',

  }

}