import React from 'react';
import {
    SafeAreaView,
    Text,
    View,
    TouchableOpacity,
    Image,
    TextInput,
    Keyboard,
    ImageBackground
} from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import DatePicker from 'react-native-date-picker'
import { images } from '../../assets/images/imageIndex';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { width, height } from '../../services/screen';
import Toast, { DURATION } from 'react-native-easy-toast';
import { colors } from '../../assets/styles/colors-theme';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { s, vs, ms } from 'react-native-size-matters';
import AntDesignIcon from 'react-native-vector-icons/AntDesign';
import CustomTextInput from '../../components/customTextInput';
import moment from 'moment';
import CustomLoginButton from '../../components/customLoginButton';
import HoshiTextInput from '../../components/hoshiTextInput'
import { Colors } from 'react-native-paper';
import I18n from '../../services/i18n'
import TitleBar from '../../components/titleBar'
import { color } from 'react-native-reanimated';
Icon.loadFont();
AntDesignIcon.loadFont();

const Signup = inject("appStore")(observer(class Signup extends React.Component {

    signupData = {
        name: 'philip',
        country_code: '+852',
        mobile: '97726727',
        email: 'philip@gmail.com',
        ver_code: '',
        password: '11111111',
        birthday: '22/12/1990',
    };

    confirmPassword = '11111111';
    dateSwitch = false

    constructor(props) {
        super(props);
        this.store = props.appStore;
        makeObservable(this, {
            signupData: observable,
            dateSwitch: observable,
            confirmPassword: observable,

        })
    }

    checkValue(str, max) {
        if (str.charAt(0) !== '0' || str == '00') {
            var num = parseInt(str);
            if (isNaN(num) || num <= 0 || num > max) num = 1;
            str = num > parseInt(max.toString().charAt(0))
                && num.toString().length == 1 ? '0' + num : num.toString();
        };
        return str;
    };

    dateTimeInputChangeHandler(e) {
        this.type = 'text';
        var input = e
        var expr = new RegExp(/\D\/$/);
        if (expr.test(input)) input = input.substr(0, input.length - 1);
        var values = input.split('/').map(function (v) {
            return v.replace(/\D/g, '')
        });
        if (values[0]) values[0] = this.checkValue(values[0], 12);
        if (values[1]) values[1] = this.checkValue(values[1], 31);
        var output = values.map(function (v, i) {
            return v.length == 2 && i < 2 ? v + '/' : v;
        });
        this.signupData.birthday = output.join('').substr(0, 10)

    }

    signupAction() {
        if (this.signupData.mobile.length >= 8) {
            if (this.signupData.password != null || this.signupData.password != '') {
                if (this.signupData.password.length >= 8) {
                    if (this.confirmPassword != null || this.confirmPassword != '') {
                        if (this.confirmPassword == this.signupData.password) {
                            if (this.signupData.first_name != '') {
                                this.store.checkMember(this.signupData, this);

                            } else {
                                this.refs.toast.show(I18n.t('pleaseInputYourName'));
                            }
                        } else {
                            this.refs.toast.show(
                                I18n.t('thePasswordDoesNotMatchTheConfirmedPassword')
                            );
                        }
                    } else {
                        I18n.t('pleaseEnterConfirmPassword')
                    }
                } else {
                    I18n.t('yourPasswordMustBeAtLeast8Characters')
                }
            } else {
                I18n.t('pleaseEnterPassword')
            }
        } else {
            this.refs.toast.show(
                I18n.t('pleaseEnterPhone')
            );
        }
    }

    birthdayOnFocusHandler() {
        Keyboard.dismiss();
        this.dateSwitch = true
    }

    birthdayOnBlurHandler() {
        Keyboard.dismiss();
        this.dateSwitch = false
    }

    birthdayConfirm(date) {
        this.signupData.birthday = moment(date).format('DD/MM/YYYY')
        this.birthdayOnBlurHandler()
    }
    render() {
        return (

            <ImageBackground resizeMode='cover' style={{ flex: 1, backgroundColor: colors.bgc }} source={require('../../assets/images/background.png')} >
                <TitleBar navigation={this.props.navigation} back={true} />

                <KeyboardAwareScrollView>
                    <View
                        style={{
                            //backgroundColor: '#FFFBF4',
                            alignItems: 'center',
                        }}>

                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 40, width: width }}>
                            <Text style={{ fontSize: 22, color: colors.fontColor, fontWeight: '800' }}>
                                {I18n.t('registrationTitle')}
                            </Text>
                            <Image source={images.titleLogo} style={{ position: 'absolute', left: s(70) }} />
                        </View>



                        <HoshiTextInput
                            placeholder={I18n.t('settingsName')}
                            value={this.signupData.name}
                            onChangeText={text => {
                                this.signupData.name = text;
                            }}
                            returnKeyType={'next'}
                            secureTextEntry={false}
                            onSubmitEditing={event => {
                                this.emailInput.focus();
                            }}
                        />

                        <HoshiTextInput
                            placeholder={I18n.t('settingsEmail')}
                            value={this.signupData.email}
                            keyboardType={'email-address'}
                            onChangeText={text => {
                                this.signupData.email = text;
                            }}
                            returnKeyType={'next'}
                            secureTextEntry={false}
                            onSubmitEditing={event => {
                                this.phoneInput.focus();
                            }}
                            inputRef={input => {
                                this.emailInput = input;
                            }}
                        />
                        <HoshiTextInput
                            placeholder={I18n.t('settingsPhoneNumber')}
                            value={this.signupData.mobile}
                            keyboardType={'phone-pad'}
                            onChangeText={text => {
                                this.signupData.mobile = text;
                            }}
                            returnKeyType={'next'}
                            secureTextEntry={false}
                            onSubmitEditing={event => {
                                this.passwordInput.focus();
                            }}
                            inputRef={input => {
                                this.phoneInput = input;
                            }}
                        />
                        <HoshiTextInput
                            placeholder={I18n.t('loginPassword')}
                            value={this.signupData.password}
                            onChangeText={text => {
                                this.signupData.password = text;
                            }}
                            returnKeyType={'next'}
                            secureTextEntry={true}
                            onSubmitEditing={event => {
                                this.confirmPasswordInput.focus();
                            }}
                            inputRef={input => {
                                this.passwordInput = input;
                            }}
                        />
                        <HoshiTextInput
                            placeholder={I18n.t('registrationConfirmPassword')}
                            value={this.confirmPassword}
                            onChangeText={text => {
                                this.confirmPassword = text;
                            }}
                            returnKeyType={'next'}
                            secureTextEntry={true}
                            onSubmitEditing={event => {
                                this.birthdayInput.focus();
                            }}
                            inputRef={input => {
                                this.confirmPasswordInput = input;
                            }}
                        />

                        <HoshiTextInput
                            placeholder={I18n.t('birthday') + " (" + I18n.t("optional") + ")"}
                            value={this.signupData.birthday}
                            returnKeyType={'done'}
                            secureTextEntry={false}
                            onSubmitEditing={event => {
                                Keyboard.dismiss();
                            }}
                            onFocus={() => this.dateSwitch = true}
                            inputRef={input => {
                                this.birthdayInput = input;
                            }}
                        />

                        <View style={{ height: 40 }} />

                        <CustomLoginButton
                            title={I18n.t('registrationTitle')}
                            onPress={() => {
                                this.signupAction();
                            }}
                        />

                    </View>

                </KeyboardAwareScrollView>
                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.fontColor }}
                    position="center"
                    positionValue={100}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
                <DatePicker
                    modal
                    open={this.dateSwitch}
                    date={moment().subtract(10, 'years').toDate()}
                    mode='date'
                    onConfirm={(date) => {
                        this.birthdayConfirm(date)
                    }}
                    onCancel={() => {
                        this.birthdayOnBlurHandler()
                    }}
                />
            </ImageBackground>

        );
    }
}))
export default Signup
