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 componentDidMount() {
    await messaging().deleteToken()
    console.log('deletetoken');

  }

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

        let fcmToken = null;
        if (regex.test(this.state.username) === true) {
          console.log('true')
          try {
            const authStatus = await messaging().requestPermission({
              alert: true,
              sound: true,
              badge: true,
            });

            console.log('authStatus >>> ', authStatus)
            const enabled =
              authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
              authStatus === messaging.AuthorizationStatus.PROVISIONAL;

            if (enabled) {
              console.log('Notification permission granted.');
              await messaging().registerDeviceForRemoteMessages();

              if (Platform.OS === 'ios') {
                let apnsToken = await messaging().getAPNSToken();
                let retry = 0;
                while (!apnsToken && retry < 10) {
                  console.log('Waiting for APNs token...');
                  await new Promise(resolve => setTimeout(resolve, 1000));
                  apnsToken = await messaging().getAPNSToken();
                  retry++;
                }
                console.log('APNs Token:', apnsToken);
              }

              fcmToken = await messaging().getToken();
              console.log('fcmToken >>>> ', fcmToken)
            } else {
              console.log('Notification permission denied.');
            }
          } catch (error) {
            console.error('Failed to request notification permission:', error);
          }

          // const fcmToken = await messaging().getAPNSToken()
          console.log('await messaging().getAPNSToken() <<<<<< ', fcmToken)


          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 {
                this.setState({
                  isLoading: false
                }, () => {
                  Alert.alert(null, t('credential_invalid'))
                })
              }
            })
        } else {
          Alert.alert(null, t('phone_format_invalid'))
          this.setState({ isLoading: false })
        }
      } else {
        Alert.alert(null, t('required_field'))
        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>
              <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={13}
                        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%',

  }

}
