import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  TouchableOpacity,
  Keyboard,
  Linking,
  TextInput,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import NaviBar from '../../components/navi-bar';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import LoadingView from '../../common/loading';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {Dropdown} from 'react-native-material-dropdown';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import BackHeader from '../../components/backHeader';
import Toast, {DURATION} from 'react-native-easy-toast';
import CheckBox from 'react-native-check-box';
import CommonTextInput from '../../components/commonTextInput';
import {inject, observer} from 'mobx-react';
import {observable} from 'mobx';
import {width, height} from '../../common/screen';
import history from '../../common/history';
import Size from '../../common/size';
const size = new Size();

const dropDownData = [
  {value: 'na', label: 'N/A'},
  {value: '18-25', label: '18-25'},
  {value: '25-40', label: '25-40'},
  {value: '41-60', label: '41-60'},
  {value: '60', label: '60+'},
];

const rentalExpData = [
  {value: 'na', label: 'N/A'},
  {value: '0', label: '0 yrs'},
  {value: '1', label: '1 yrs'},
  {value: '2', label: '2 yrs'},
  {value: '3', label: '3 yrs'},
  {value: '4', label: '4 yrs'},
  {value: '5+', label: '5+ yrs'},
];

const countryCodeDropDownData = [
  {value: '852', label: '+852'},
  {value: '86', label: '+86'},
  {value: '886', label: '+886'},
];

const yesno = [
  {value: 'na', label: 'N/A'},
  {value: 'no', label: 'No'},
  {value: 'yes', label: 'Yes'},
];
const genderDropDownData = [
  {value: 'na', label: 'N/A'},
  {value: 'M', label: 'M'},
  {value: 'F', label: 'F'},
];
@inject('appStore')
@observer
export default class Signup extends Component {
  @observable
  signupData = {
    vercode: '',
    fullname: '',
    email: '',
    gender: 'na',
    countryCode: '852',
    chara: 'owner',
    age: 'na',
    pwd: '',
    phone: '',
    refcode: '',
    ownerPhone: '', // 如果char係租客就會有，OWNER就NULL
  };
  @observable
  confirmPassword = '';
  @observable
  checked = false;
  @observable
  Rentalexperience = 'na';
  @observable
  pet = 'na';
  @observable
  smoke = 'na';

  @observable
  userData = {};

  @observable
  personinfo = false;

  @observable
  phoneVerification = '';

  constructor(props) {
    super(props);
    this.store = props.appStore;
    this.state = {
      countryCode: '852',
    };
    console.log(this.props.navigation.getParam('type', false));
  }

  loginAction(which) {
    console.log(which);
  }

  colorReturn() {
    if (this.personinfo) {
      return colors.mainColor;
    } else {
      return colors.textColor;
    }
  }

  signupAction() {
    if (this.props.navigation.getParam('type', false)) {
      this.signupData.chara = 'owner';
    } else {
      this.signupData.chara = 'tenant';
    }
    if (this.signupData.phone.length >= 8) {
      if (this.checked) {
        if (this.signupData.pwd != null || this.signupData.pwd != '') {
          if (this.signupData.pwd.length >= 8) {
            if (
              this.confirmPassword != null ||
              this.state.confirmPassword != ''
            ) {
              if (this.confirmPassword == this.signupData.pwd) {
                //this.store.signupPost(this, this.signupData);
                // history.push(this,'/signUpVerify',{signupData:this.signupData});
                this.store.checkMember(this.signupData, this);
              } else {
                this.refs.toast.show(
                  'Password and confirm password is not match',
                );
              }
            } else {
              this.refs.toast.show('Please enter confirm password');
            }
          } else {
            this.refs.toast.show('your password must be at least 8 characters');
          }
        } else {
          this.refs.toast.show('Please enter password');
        }
      } else {
        this.refs.toast.show('Please accept the privacy policy');
      }
    } else {
      this.refs.toast.show('Please input your right mobile phone number');
    }
  }

  personalOptionalAction() {
    this.personinfo = !this.personinfo;
    if (!this.personinfo) {
      this.signupData.gender = 'na';
      this.signupData.age = 'na';
      this.Rentalexperience = 'na';
      this.pet = 'na';
      this.smoke = 'na';
    }
  }
  renderRadioButtons() {
    return (
      <View
        style={{
          flexDirection: 'row',
          marginLeft: 50,
          marginTop: 30,
          backgroundColor: 'white',
        }}>
        <TouchableOpacity
          style={{
            width: 25,
            height: 25,
            borderRadius: 8,
            alignItems: 'center',
            justifyContent: 'center',
            borderColor: colors.textColor,
            borderWidth: 1,
            backgroundColor:
              this.signupData.gender === 'M' ? colors.mainColor : 'white',
          }}
          onPress={() => {
            this.signupData.gender = 'M';
          }}>
          <Text
            style={{
              fontFamily: Fonts.ubuntu,
              fontSize: 12,
              color: colors.textColor,
            }}>
            M
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            width: 25,
            height: 25,
            borderRadius: 8,
            alignItems: 'center',
            justifyContent: 'center',
            borderColor: colors.textColor,
            borderWidth: 1,
            marginLeft: 10,
            backgroundColor:
              this.signupData.gender === 'F' ? colors.mainColor : 'white',
          }}
          onPress={() => {
            this.signupData.gender = 'F';
          }}>
          <Text
            style={{
              fontFamily: Fonts.ubuntu,
              fontSize: 12,
              color: colors.textColor,
            }}>
            F
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    const thirdPartyLoginButtons = [
      {
        text: this.store.text.googleLogin,
        icon: 'google',
        color: '#2D9AFF',
        which: 'google',
      },
      {
        text: this.store.text.facebookLogin,
        icon: 'facebook-square',
        color: '#295BA2',
        which: 'facebook',
      },
      {
        text: this.store.text.wechatLogin,
        icon: 'weixin',
        color: '#00E86E',
        which: 'wechat',
      },
    ];
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <LoadingView visible={this.store.loading} />
        {/* <View style={{ flex: 0.07, backgroundColor: colors.mainColor, justifyContent: 'center', }}>
                    <Icon name={'arrow-left'}
                        size={22}
                        color={'white'}
                        style={{ marginLeft: 20 }} />

                </View> */}
        <BackHeader instance={this} back={true} title={'注册'} />

        <View style={{flex: 1, width: width, marginTop: 10}}>
          <KeyboardAwareScrollView>
            {/* <CommonTextInput
              placeholder={this.store.text.phonenumber}
              value={this.signupData.mobile}
              onChangeText={phone => (this.signupData.phone = phone)}
              returnKeyType={'next'}
              keyboardType={'numeric'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.nameinput.focus();
              }}
            /> */}
            <View
              style={{
                borderBottomColor: colors.textColor,
                borderBottomWidth: 1,
                flexDirection: 'row',
                marginLeft: 30,
                marginRight: 30,
                marginTop: 20,
                height: verticalScale(40),
                borderRadius: 5,
              }}>
              <Dropdown
                label=""
                data={countryCodeDropDownData}
                labelFontSize={0}
                fontSize={12}
                dropdownOffset={{top: 0, bottom: 0}}
                value={this.signupData.countryCode}
                onChangeText={value => {
                  this.signupData.countryCode = value;
                  console.log(this.signupData.countryCode);
                }}
                textColor={colors.mainColor}
                itemTextStyle={{fontFamily: Fonts.ubuntu}}
                baseColor={colors.baseColor}
                containerStyle={{
                  borderWidth: 1,
                  borderRadius: 6,
                  borderColor: colors.textColor,
                  margin: 0,
                  padding: 0,
                  width: 70,
                  height: 25,
                  marginTop: 7,
                }}
                style={{fontFamily: Fonts.ubuntu, color: colors.mainColor}}
                inputContainerStyle={{
                  borderBottomColor: 'transparent',
                  marginBottom: scale(-12),
                  marginLeft: 10,
                }}
                labelHeight={0}
              />
              <TextInput
                style={{
                  // backgroundColor:theme.inputBgc,
                  flex: 1,
                  color: colors.textColor,
                  height: verticalScale(35),
                  marginBottom: moderateScale(30),
                  paddingBottom: 0,
                  fontSize: 13,
                  paddingRight: 20,
                  paddingLeft: 20,
                  fontFamily: Fonts.ubuntuL,
                }}
                value={this.signupData.mobile}
                underlineColorAndroid="rgba(0,0,0,0)"
                onChangeText={phone => (this.signupData.phone = phone)}
                placeholder={this.store.text.phonenumber}
                placeholderStyle={{fontWeight: 'bold'}}
                placeholderTextColor={colors.textColor}
                secureTextEntry={false}
                blurOnSubmit={false}
                returnKeyType={'next'}
                onSubmitEditing={event => {
                  this.nameinput.focus();
                }}
              />
            </View>

            <CommonTextInput
              placeholder={this.store.text.fullname}
              returnKeyType={'next'}
              inputRef={input => {
                this.nameinput = input;
              }}
              secureTextEntry={false}
              value={this.signupData.fullname}
              onChangeText={fullname => (this.signupData.fullname = fullname)}
              onSubmitEditing={event => {
                this.emailinput.focus();
              }}
            />

            <CommonTextInput
              placeholder={this.store.text.email}
              value={this.signupData.email}
              inputRef={input => {
                this.emailinput = input;
              }}
              onChangeText={email => (this.signupData.email = email)}
              returnKeyType={'next'}
              secureTextEntry={false}
              onSubmitEditing={event => {
                this.passwordinput.focus();
              }}
            />
            {/* {this.renderRadioButtons()} */}
            {/* <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <View style={{flex: 0.5}}>
                <Text
                  style={{
                    fontFamily: Fonts.ubuntuTh,
                    fontSize: 13,
                    color: colors.textColor,
                    marginLeft: 50,
                  }}>
                  {this.store.text.countryCode}
                </Text>
              </View>
              <View style={{width: 70, marginLeft: 20}}>
                <Dropdown
                  label=""
                  data={countryCodeDropDownData}
                  labelFontSize={0}
                  fontSize={12}
                  dropdownOffset={{top: 0, bottom: 0}}
                  value={this.signupData.countryCode}
                  onChangeText={value => {
                    this.signupData.countryCode = value;
                    console.log(this.signupData.countryCode);
                  }}
                  textColor={colors.mainColor}
                  itemTextStyle={{fontFamily: Fonts.ubuntu}}
                  baseColor={colors.baseColor}
                  containerStyle={{
                    borderWidth: 1,
                    borderRadius: 6,
                    borderColor: colors.textColor,
                    margin: 0,
                    padding: 0,
                  }}
                  style={{fontFamily: Fonts.ubuntu, color: colors.mainColor}}
                  inputContainerStyle={{
                    borderBottomColor: 'transparent',
                    marginBottom: -12,
                    marginLeft: 10,
                  }}
                  labelHeight={0}
                />
              </View>
            </View> */}
            <TouchableOpacity
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginTop: 10,
                marginLeft: 30,
              }}
              onPress={() => {
                this.personalOptionalAction();
              }}>
              <Icon
                name={'dot-circle'}
                color={this.colorReturn()}
                size={13}
                solid
              />
              <Text
                style={{
                  fontFamily: Fonts.ubuntuTh,
                  fontSize: 14,
                  color: colors.textColor,
                  marginLeft: 10,
                }}>
                {this.store.text.personalinfo}
              </Text>
            </TouchableOpacity>
            {this.personinfo ? (
              <View>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginTop: 20,
                  }}>
                  <View
                    style={{
                      flex: 0.5,
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}>
                    {/* <TouchableOpacity style = {{ marginLeft: 50,}}>
                <Icon name = {'dot-circle'} color = {'gray'} size = {13} solid/>
                </TouchableOpacity> */}
                    <Text
                      style={{
                        fontFamily: Fonts.ubuntuTh,
                        fontSize: 13,
                        color: colors.textColor,
                        marginLeft: 50,
                      }}>
                      {this.store.text.gender}
                    </Text>
                  </View>

                  <View style={{width: 70, marginLeft: 20}}>
                    <Dropdown
                      label=""
                      data={genderDropDownData}
                      labelFontSize={0}
                      fontSize={12}
                      dropdownOffset={{top: 0, bottom: 0}}
                      value={this.signupData.gender}
                      onChangeText={value => {
                        this.signupData.gender = value;
                      }}
                      textColor={colors.mainColor}
                      itemTextStyle={{fontFamily: Fonts.ubuntu}}
                      baseColor={colors.baseColor}
                      containerStyle={{
                        borderWidth: 1,
                        borderRadius: 6,
                        borderColor: colors.textColor,
                        margin: 0,
                        padding: 0,
                      }}
                      style={{
                        fontFamily: Fonts.ubuntu,
                        color: colors.mainColor,
                      }}
                      inputContainerStyle={{
                        borderBottomColor: 'transparent',
                        marginBottom: -12,
                        marginLeft: 10,
                      }}
                      labelHeight={0}
                    />
                  </View>
                </View>
                {this.props.navigation.getParam('type', false) ? (
                  <View />
                ) : (
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      marginTop: 10,
                    }}>
                    <View style={{flex: 0.5}}>
                      <Text
                        style={{
                          fontFamily: Fonts.ubuntuTh,
                          fontSize: 13,
                          color: colors.textColor,
                          marginLeft: 50,
                        }}>
                        {this.store.text.Rentalexperience}
                      </Text>
                    </View>

                    <View style={{width: 70, marginLeft: 20}}>
                      <Dropdown
                        label=""
                        data={rentalExpData}
                        labelFontSize={0}
                        fontSize={12}
                        dropdownOffset={{top: 0, bottom: 0}}
                        value={this.Rentalexperience}
                        onChangeText={value => {
                          this.Rentalexperience = value;
                        }}
                        textColor={colors.mainColor}
                        itemTextStyle={{fontFamily: Fonts.ubuntu}}
                        baseColor={colors.baseColor}
                        containerStyle={{
                          borderWidth: 1,
                          borderRadius: 6,
                          borderColor: colors.textColor,
                          margin: 0,
                          padding: 0,
                        }}
                        style={{
                          fontFamily: Fonts.ubuntu,
                          color: colors.mainColor,
                        }}
                        inputContainerStyle={{
                          borderBottomColor: 'transparent',
                          marginBottom: -12,
                          marginLeft: 10,
                        }}
                        labelHeight={0}
                      />
                    </View>
                  </View>
                )}

                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginTop: 10,
                  }}>
                  <View style={{flex: 0.5}}>
                    <Text
                      style={{
                        fontFamily: Fonts.ubuntuTh,
                        fontSize: 13,
                        color: colors.textColor,
                        marginLeft: 50,
                      }}>
                      {this.store.text.age}
                    </Text>
                  </View>

                  <View style={{width: 70, marginLeft: 20}}>
                    <Dropdown
                      label=""
                      data={dropDownData}
                      labelFontSize={0}
                      fontSize={12}
                      dropdownOffset={{top: 0, bottom: 0}}
                      value={this.signupData.age}
                      onChangeText={value => {
                        this.signupData.age = value;
                      }}
                      textColor={colors.mainColor}
                      itemTextStyle={{fontFamily: Fonts.ubuntu}}
                      baseColor={colors.baseColor}
                      containerStyle={{
                        borderWidth: 1,
                        borderRadius: 6,
                        borderColor: colors.textColor,
                        margin: 0,
                        padding: 0,
                      }}
                      style={{
                        fontFamily: Fonts.ubuntu,
                        color: colors.mainColor,
                      }}
                      inputContainerStyle={{
                        borderBottomColor: 'transparent',
                        marginBottom: -12,
                        marginLeft: 10,
                      }}
                      labelHeight={0}
                    />
                  </View>
                </View>
                {this.props.navigation.getParam('type', false) ? (
                  <View />
                ) : (
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      marginTop: 10,
                    }}>
                    <View style={{flex: 0.5}}>
                      <Text
                        style={{
                          fontFamily: Fonts.ubuntuTh,
                          fontSize: 13,
                          color: colors.textColor,
                          marginLeft: 50,
                        }}>
                        {this.store.text.pet}
                      </Text>
                    </View>
                    <View style={{width: 70, marginLeft: 20}}>
                      <Dropdown
                        label=""
                        data={yesno}
                        labelFontSize={0}
                        fontSize={12}
                        dropdownOffset={{top: 0, bottom: 0}}
                        value={this.pet}
                        onChangeText={value => {
                          this.pet = value;
                        }}
                        textColor={colors.mainColor}
                        itemTextStyle={{fontFamily: Fonts.ubuntu}}
                        baseColor={colors.baseColor}
                        containerStyle={{
                          borderWidth: 1,
                          borderRadius: 6,
                          borderColor: colors.textColor,
                          margin: 0,
                          padding: 0,
                        }}
                        style={{
                          fontFamily: Fonts.ubuntu,
                          color: colors.mainColor,
                        }}
                        inputContainerStyle={{
                          borderBottomColor: 'transparent',
                          marginBottom: -12,
                          marginLeft: 10,
                        }}
                        labelHeight={0}
                      />
                    </View>
                  </View>
                )}
                {this.props.navigation.getParam('type', false) ? (
                  <View />
                ) : (
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      marginTop: 10,
                    }}>
                    <View style={{flex: 0.5}}>
                      <Text
                        style={{
                          fontFamily: Fonts.ubuntuTh,
                          fontSize: 13,
                          color: colors.textColor,
                          marginLeft: 50,
                        }}>
                        {this.store.text.smoke}
                      </Text>
                    </View>
                    <View style={{width: 70, marginLeft: 20}}>
                      <Dropdown
                        label=""
                        data={yesno}
                        labelFontSize={0}
                        fontSize={12}
                        dropdownOffset={{top: 0, bottom: 0}}
                        value={this.smoke}
                        onChangeText={value => {
                          this.smoke = value;
                        }}
                        textColor={colors.mainColor}
                        itemTextStyle={{fontFamily: Fonts.ubuntu}}
                        baseColor={colors.baseColor}
                        containerStyle={{
                          borderWidth: 1,
                          borderRadius: 6,
                          borderColor: colors.textColor,
                          margin: 0,
                          padding: 0,
                        }}
                        style={{
                          fontFamily: Fonts.ubuntu,
                          color: colors.mainColor,
                        }}
                        inputContainerStyle={{
                          borderBottomColor: 'transparent',
                          marginBottom: -12,
                          marginLeft: 10,
                        }}
                        labelHeight={0}
                      />
                    </View>
                  </View>
                )}
              </View>
            ) : (
              <View />
            )}

            <CommonTextInput
              placeholder={this.store.text.password}
              secureTextEntry={true}
              value={this.signupData.pwd}
              onChangeText={pwd => (this.signupData.pwd = pwd)}
              returnKeyType={'next'}
              inputRef={input => {
                this.passwordinput = input;
              }}
              onSubmitEditing={event => {
                this.confirmPasswordinput.focus();
              }}
            />
            <CommonTextInput
              placeholder={this.store.text.confirmPassword}
              secureTextEntry={true}
              value={this.signupData.confirmPassword}
              onChangeText={password => (this.confirmPassword = password)}
              returnKeyType={'next'}
              inputRef={input => {
                this.confirmPasswordinput = input;
              }}
              onSubmitEditing={event => {
                this.refcodeinput.focus();
              }}
            />
            <CommonTextInput
              placeholder={this.store.text.refferralCode}
              value={this.signupData.refcode}
              onChangeText={refferralCode =>
                (this.signupData.refcode = refferralCode)
              }
              returnKeyType={'done'}
              inputRef={input => {
                this.refcodeinput = input;
              }}
              onSubmitEditing={event => {
                Keyboard.dismiss();
              }}
            />

            <View
              style={{
                flexDirection: 'row',
                marginTop: 15,
                marginLeft: 30,
                marginRight: 30,
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <CheckBox
                checkedImage={
                  <Icon
                    color={colors.mainColor}
                    size={size.getSize(20)}
                    name="check-square"
                  />
                }
                unCheckedImage={
                  <Icon
                    color={colors.mainColor}
                    size={size.getSize(20)}
                    name="square"
                  />
                }
                onClick={() => (this.checked = !this.checked)}
                checkBoxColor={colors.mainColor}
                isChecked={this.checked}
              />
              <View style={{paddingRight: 10}}>
                <Text
                  style={{
                    fontFamily: Fonts.ubuntu,
                    color: colors.textColor,
                  }}
                  // onPress={() => {
                  //   //    this.navigatieAction("SignUpVerify");
                  //   Linking.openURL(
                  //     "https://www.hangryfood.co/privacy-statement"
                  //   );
                  // }}
                >
                  {' By registering you agree to our'}
                  <Text
                    style={{
                      fontFamily: Fonts.ubuntu,
                      color: colors.mainColor,
                    }}
                    onPress={() => {
                      Linking.openURL('http://rent-chat.com/#mu-pa');
                    }}>
                    {' Payment Agreement '}
                  </Text>
                  <Text
                    style={{
                      fontFamily: Fonts.ubuntu,
                      color: colors.textColor,
                    }}>
                    and
                  </Text>
                  <Text
                    style={{
                      fontFamily: Fonts.ubuntu,
                      color: colors.mainColor,
                    }}
                    onPress={() => {
                      Linking.openURL('http://rent-chat.com/#mu-sa');
                    }}>
                    {' Service Agreememt.'}
                  </Text>
                </Text>
              </View>
            </View>
          </KeyboardAwareScrollView>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.signupAction();
            }}>
            <Text style={styles.buttonText}>{this.store.text.next}</Text>
          </TouchableHighlight>
        </View>
        <Toast
          ref="toast"
          style={{backgroundColor: colors.mainColor}}
          position="bottom"
          positionValue={200}
          fadeInDuration={750}
          fadeOutDuration={2000}
          opacity={0.8}
          textStyle={{color: 'white'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.flatten({
  textView: {
    color: colors.textColor,
    fontFamily: Fonts.ubuntuL,
    fontSize: size.getSize(13),
  },
  buttonText: {
    color: '#fff',
  },
  buttonView: {
    backgroundColor: colors.mainColor,
    marginRight: 30,
    marginLeft: 30,
    marginTop: 30,
    marginBottom: 30,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  buttonText: {
    fontSize: 15,
    fontFamily: Fonts.ubuntu,
    color: 'white',
  },
});
