import React, { Component } from 'react'
import { ScrollView, TouchableOpacity, View, Alert, Platform } from 'react-native'
import Image from 'react-native-fast-image'
import { CustomStepIndicator } from '../../components/StepIndicator'
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import { CustomButton } from '../../components/CustomButton'
import { connect } from 'react-redux'
import { checkPaymentMeter, register, registerDevice, testConnect } from '../../api/UserApi'
import { bindActionCreators } from 'redux'
import { appSetDevice, appSetPushToken, appSetToken, appSetUser, setPopupNotification } from '../../redux/app/action'
import messaging from "@react-native-firebase/messaging";
import moment from 'moment'
import { setToken } from '../../api/api'
import { BackgroundImage_RegisterForm } from '../../components/BackgroundImage_RegisterForm'
import LinearGradient from 'react-native-linear-gradient';
import DeviceInfo from 'react-native-device-info';
import Text from '../../components/Text';
import { t } from '../../utils/i18n'

class RegisterProfileScreen extends Component {

  constructor(props) {
    super(props)

    this.state = {
      auth: false,
      disableButton: false,
      image_url: require('../../../assets/images/profile.png'),
    }

    this._register = this._register.bind(this);
    this.initNotification = this.initNotification.bind(this);

  }

  componentDidMount() {
    console.log(this.props)
    if (!this.props.push_token) {
      this.initNotification();
    }

    this.setState({
      image_url: this.props.navigation.getParam('image_url', require('../../../assets/images/profile.png'))
    })
  }



  initNotification = async () => {
    await this.setPermission()

    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);
    }

    const fcmToken = await messaging().getToken()
    console.log('fcmToken', fcmToken)
    if (fcmToken) {
      this.props.appSetPushToken(fcmToken)
      console.log('fcmToken', this.props)
    } else {
      Alert.alert(null, 'Cannot get push token.', [{ text: 'ok' }])
    }
  }

  setPermission = async () => {
    try {
      const enabled = await messaging().hasPermission()
      if (!enabled) {
        await messaging().requestPermission()
      }
    } catch (error) {
      console.log('error', error)
    }
  }


  async _register() {
    this.setState({ disableButton: true })
    if (!this.props.device && this.props.push_token) {
      const resultSendDevice = await registerDevice(this.props.push_token)
      if (resultSendDevice.ok && resultSendDevice.data.success) {
        this.props.appSetDevice(resultSendDevice.data.device)
      }
    }

    let systemName = DeviceInfo.getSystemName();
    let deviceId = null
    if (systemName == "Android") {
      if (!this.props.device) {
        Alert.alert(null, 'Cannot get push token or device.', [{ text: 'ok' }])
        return;
      }
      deviceId = this.props.device.id
    }

    register({
      ...this.props.user,
      device_id: deviceId,
      name: this.props.user.name.replace(/\u00a0/g, /\u0020/),
      fcm_token: this.props.push_token
    }).then(
      (res) => {
        if (res.ok && res.data.success) {
          let token = res.data.token
          //this.props.appSetToken(token)
          if (res.data.customer) {
            this.props.appSetUser(res.data.customer)
            this.props.appSetToken(res.data.token)
            setToken(token)

            Alert.alert(
              '',
              t('register_success'),
              [
                {
                  text: 'OK', onPress: () => {
                    /*checkPaymentMeter()
                      .then(result => {
                        if(result.data){
                          let data = {
                            pending_payment: result.data.pending_payment != null ? result.data.pending_payment : 0,
                            is_notified_electric: result.data.user.is_notified_electric,
                            is_notified_overdue: result.data.user.is_notified_overdue,
                            is_notified_meter: result.data.user.is_notified_meter,
                            payment_id: result.data.payment_id,
                            notified_meter_at: result.data.notified_meter_at ? result.data.notified_meter_at :  moment().format('DD MMM YYYY')
                          }

                          this.props.setPopupNotification(data)
                        }
                      })*/

                    this.setState({ isLoading: false }, () => {
                      this.props.navigation.navigate('HomeScreen', { isLogin: true })
                    })
                  }
                }
              ],
              { cancelable: false }
            )

            //Alert.alert(null, t('register_success'), [{ text: t('ok') }])
            //this.props.navigation.navigate('HomeScreen')

          }
        } else {
          this.props.appSetUser(null)
          let error_text = res.data.error;
          if (res.data.errors && res.data.errors.room[0]) {
            error_text = res.data.errors.room[0]
          }
          Alert.alert(null, error_text, [{ text: t('ok') }])
          this.props.navigation.goBack()
        }
      }
    );
  }

  render() {
    const { user } = this.props
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
      }}>
        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
          <View style={styles.container}>
            <View style={styles.step_indicator}>
              <CustomStepIndicator currentStep={3} totalStep={3} style={{}} />
            </View>
            <View style={styles.logo}>
              <View style={{
                flexGrow: 1, alignItems: 'center', paddingVertical: 20,
              }}>
                <Image
                  style={{ width: 100, height: 100, borderRadius: 50, borderColor: 'white', borderWidth: 2 }}
                  source={this.state.image_url}
                />
              </View>
              {/*<Text> LOGO </Text>*/}
            </View>
            <View style={{ backgroundColor: '#00420A', flex: 1 }}>
              <BackgroundImage_RegisterForm >
                <View style={styles.form}>

                  <Text style={styles.headerTitle}> {t('profile')} </Text>
                  <View style={[styles.table]}>

                    <View style={styles.row_title}>
                      <Text style={styles.title_data}> {t('name')} </Text>
                      {/* <Text style={styles.title_data}> อีเมล </Text> */}
                      {/*<Text style={styles.title_data}> {t('gender')} </Text>*/}
                      {/*<Text style={styles.title_data}> {t('birth_date')} </Text>*/}
                      <Text style={styles.title_data}> {t('phone2')} </Text>
                    </View>
                    {
                      user !== null &&
                      <View style={styles.row_data}>
                        <Text style={styles.detail_data}> {user.name} </Text>
                        {/* <Text style={styles.detail_data}> {user.email} </Text> */}
                        {/*<Text style={styles.detail_data}> {user.gender} </Text>*/}
                        {/*<Text style={styles.detail_data}> {moment(user.birth_date_show).add(543, 'years').format('D MMMM YYYY')} </Text>*/}
                        <Text style={styles.detail_data}> {user.mobile}  </Text>
                      </View>
                    }
                  </View>

                  <Text style={[styles.headerTitle]}> {t('accom_info')} </Text>
                  <View style={[styles.table]}>
                    <View style={styles.row_title}>
                      <Text style={styles.title_data}> {t('project')} </Text>
                      <Text style={styles.title_data}> {t('building')} </Text>
                      <Text style={styles.title_data}> {t('room2')} </Text>
                    </View>
                    {
                      user !== null &&
                      <View style={styles.row_data}>
                        <Text style={styles.detail_data}> {user.project_name}  </Text>
                        <Text style={styles.detail_data}> {user.building}</Text>
                        <Text style={styles.detail_data}> {user.room} </Text>
                      </View>
                    }

                  </View>
                </View>

              </BackgroundImage_RegisterForm>
            </View>
          </View>
        </ScrollView>
        <View style={styles.buttons}>
          <View style={styles.row}>
            <CustomButton style={styles.btn_next_register} title={'ยืนยัน'} sizeText={14}
              onPress={this._register} disabled={this.state.disableButton} />
          </View>
        </View>
      </LinearGradient>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column',
    height: GetWidthHeightDevice.HeightDevice

  },
  logo: {
    height: '23%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  form: {
    // height: '45%',

    flex: 1,
    padding: 15,
    paddingBottom: 0,
    position: 'relative',
    //backgroundColor: 'rgba(0, 66, 18,0.7)'
  },
  table: {
    flexDirection: 'row',
  },
  row: {
    // flex: 1,
    flexDirection: 'row',
    marginVertical: 5,
  },
  row_title: {
    flex: 2,
    flexDirection: 'column',
    marginVertical: 5,
  },
  row_data: {
    flex: 4,
    flexDirection: 'column',
    marginVertical: 5,
  },
  step_indicator: {
    // flex: 1,
  },
  headerTitle: {
    color: '#8BC34A',
    marginTop: 5,
    marginBottom: 5
  },
  row_grow: {
    flexGrow: 1,
    // marginLeft: 5
    // backgroundColor:"red",
  },
  row_grow_first: {
    flexGrow: 1,
    marginRight: 5,
    // backgroundColor:"blue",
  },
  title_data: {
    color: 'rgba(255, 255, 255, 0.65)',
    fontSize: 14,
    marginVertical: 5
  },
  detail_data: {
    fontSize: 14,
    marginVertical: 5,
    color: 'white',
  },
  buttons: {
    flexGrow: 1,
    // padding: 10,
    // backgroundColor: 'red',
    // alignItems: 'flex-end',
    // justifyContent: 'center',
    position: 'absolute',
    flexDirection: 'row',
    marginHorizontal: 15,
    bottom: 10
  }, btn_next_register: {
    backgroundColor: '#145EB3'
  }
}

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