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 WechatSignup extends Component {
  @observable
  signupData = this.props.navigation.state.params.signupData;
  @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',
    };
  }

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

  signupAction() {
    if (this.signupData.email != '') {
      this.store.signupWithWeChat(this.signupData, this);
    } else {
      this.refs.toast.show('Please input Email');
    }
  }

  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={this.store.text.signup}
        />

        <View style={{flex: 1, width: width, marginTop: 10}}>
          <KeyboardAwareScrollView>
            <CommonTextInput
              placeholder={this.store.text.email}
              value={this.signupData.email}
              inputRef={input => {
                this.emailinput = input;
              }}
              onChangeText={email => (this.signupData.email = email)}
              secureTextEntry={false}
            />
          </KeyboardAwareScrollView>
          <TouchableHighlight
            style={styles.buttonView}
            onPress={() => {
              this.signupAction();
            }}>
            <Text style={styles.buttonText}>{this.store.text.signup}</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',
  },
});
