import React from 'react';
import { SafeAreaView, Text, Image, Alert, Linking, View, TouchableOpacity, StyleSheet, TextInput, Keyboard, DatePickerIOS } from 'react-native';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
import { width, height } from '../../services/screen';
import { colors } from '../../assets/styles/colors-theme';
import { images } from '../../assets/images/imageIndex';
import AsyncStorage from '@react-native-community/async-storage';
import Toast, { DURATION } from 'react-native-easy-toast';
import moment from 'moment'
import { getStatusBarHeight } from 'react-native-status-bar-height';
import CustomLoginButton from '../../components/customLoginButton';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import CustomCircleButton from '../../components/customCircleButton'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import Setting from '../../components/setting'
import DatePicker from 'react-native-date-picker'
Icon.loadFont();
const InputClientData = inject("appStore")(observer(class InputClientData extends React.Component {


    settingViewAble = false

    lang = this.props.appStore.lanuageSelection

    data = {
        gender: 'M',
        name: '',
        mobile: '',
        email: '',
        avatarData: '',
        countryCode: '+852',
        age: '15-20',
        birthday: '',
    }



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

            lang: observable,

            data: observable,

        })
        this.data.birthday = moment().toDate()
    }
    async componentDidMount() {

    }



    genderSelectHandler(which) {
        if (which) {
            if (this.data.gender == 'M') {
                return true
            } else {
                return false
            }
        } else {
            if (this.data.gender == 'F') {
                return true
            } else {
                return false
            }
        }
    }

    genderSelectAction(which) {
        if (which) {
            this.data.gender = "M"
        } else {
            this.data.gender = "F"
        }
        console.log(this.data.gender)
    }

    ageSelectHandler(age) {
        if (this.data.age == age) {
            return true
        } else {
            return false
        }
    }

    ageSelectAction(age) {
        this.data.age = age;
    }

    enterAction() {
        console.log(this.data)
        if (this.data.name != '') {
            if (this.data.mobile != '') {
                this.store.regMember(JSON.parse(JSON.stringify(this.data)), this);
            } else {
                this.refs.toast.show(this.store.text.pleaseInputCustomerPhoneNumber)
            }
        } else {
            this.refs.toast.show(this.store.text.pleaseInputCustomerName)
        }
        //   this.props.navigation.navigate('Select')
    }

    render() {
        return (
            <SafeAreaView
                style={{
                    flex: 1,
                    backgroundColor: 'white',
                }}>
                <View style={{ marginTop: Platform.OS === 'ios' ? 40 : getStatusBarHeight() }}>
                    <Image style={{ marginLeft: 40, }} source={images.title.logo} />
                </View>
                <View style={{ flex: 1 }}>

                    <View style={{ flex: 0.9, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 30, color: colors.buttonColor, fontWeight: '800' }}>
                            {this.store.text.customerProfile}
                        </Text>
                        <KeyboardAwareScrollView style={{ marginTop: 50 }}>
                            <View style={styles.rowView}>
                                <View style={styles.rowLeftView}>
                                    <Text style={styles.rowTitleView}>{this.store.text.gender}</Text>
                                </View>
                                <View style={styles.rowRightView}>
                                    <CustomCircleButton title={this.store.text.mr} selected={this.genderSelectHandler(true)} onPress={() => { this.genderSelectAction(true) }} />
                                    <CustomCircleButton title={this.store.text.miss} selected={this.genderSelectHandler(false)} onPress={() => { this.genderSelectAction(false) }} />
                                </View>
                            </View>
                            <View style={styles.rowView}>
                                <View style={styles.rowLeftView}>
                                    <Text style={styles.rowTitleView}>{this.store.text.name}</Text>
                                </View>
                                <View style={styles.rowRightView}>
                                    <View style={styles.inputTextBorder}>
                                        <TextInput
                                            underlineColorAndroid="rgba(0,0,0,0)"
                                            onChangeText={text => this.data.name = text}
                                            onSubmitEditing={event => this.phoneInput.focus()}
                                            returnKeyType={'next'}
                                            value={this.data.name}
                                            style={styles.inputTextView}
                                        />
                                    </View>
                                </View>
                            </View>
                            <View style={styles.rowView}>
                                <View style={styles.rowLeftView}>
                                    <Text style={styles.rowTitleView}>{this.store.text.mobilephone}</Text>
                                </View>
                                <View style={styles.rowRightView}>
                                    <View style={styles.inputTextBorder}>
                                        <Text style={{ marginLeft: 85, color: colors.buttonColor, fontSize: 20 }}>
                                            {'+852'}
                                        </Text>
                                        <TextInput
                                            underlineColorAndroid="rgba(0,0,0,0)"
                                            onChangeText={text => this.data.mobile = text}
                                            keyboardType='number-pad'
                                            ref={input => this.phoneInput = input}
                                            onSubmitEditing={event => this.emailInput.focus()}
                                            returnKeyType={'next'}
                                            value={this.data.mobile}
                                            style={styles.inputTextView}
                                        />
                                    </View>
                                </View>
                            </View>
                            <View style={styles.rowView}>
                                <View style={styles.rowLeftView}>
                                    <Text style={styles.rowTitleView}>{this.store.text.email}</Text>
                                </View>
                                <View style={styles.rowRightView}>
                                    <View style={styles.inputTextBorder}>
                                        <TextInput
                                            underlineColorAndroid="rgba(0,0,0,0)"
                                            onChangeText={text => this.data.email = text}
                                            ref={input => this.emailInput = input}
                                            returnKeyType={'done'}
                                            onSubmitEditing={event => Keyboard.dismiss}
                                            // onFocus={this.props.onFocus}
                                            value={this.data.email}
                                            style={styles.inputTextView}
                                        />
                                    </View>
                                </View>
                            </View>
                            <View style={styles.rowView}>
                                <View style={styles.rowLeftView}>
                                    <Text style={styles.rowTitleView}>{this.store.text.age}</Text>
                                </View>
                                <View style={styles.rowRightView}>
                                    <CustomCircleButton title={'15-20'} selected={this.ageSelectHandler('15-20')} onPress={() => { this.ageSelectAction('15-20') }} />
                                    <CustomCircleButton title={'21-30'} selected={this.ageSelectHandler('21-30')} onPress={() => { this.ageSelectAction('21-30') }} />
                                    <CustomCircleButton title={'31-40'} selected={this.ageSelectHandler('31-40')} onPress={() => { this.ageSelectAction('31-40') }} />
                                    <CustomCircleButton title={'over 41'} selected={this.ageSelectHandler('over 41')} onPress={() => { this.ageSelectAction('over 41') }} />
                                </View>
                            </View>
                            <View style={[styles.rowView, { marginTop: 100 }]}>
                                <View style={styles.rowLeftView}>
                                    <Text style={styles.rowTitleView}>{this.store.text.birthday}</Text>
                                </View>
                                <View style={styles.rowRightView}>
                                    <DatePicker

                                        mode='date'
                                        date={moment().toDate()}
                                        onDateChange={date => this.data.birthday = date}
                                    />
                                </View>
                            </View>

                        </KeyboardAwareScrollView>
                    </View>
                    <View style={{ width: width, justifyContent: 'center', alignItems: 'center' }}>
                        <CustomLoginButton title={this.store.text.confirm} width={3} onPress={() => this.enterAction()} />
                    </View>


                    <View style={{ flex: 0.1, justifyContent: 'center', alignItems: 'center', }}>


                        <Setting settingViewAble={this.settingViewAble} self={this} onPress={() => { this.settingViewAble = !this.settingViewAble }} />

                    </View>

                </View>
                <Toast
                    ref="toast"
                    style={{ backgroundColor: colors.buttonColor }}
                    position="bottom"
                    positionValue={200}
                    fadeInDuration={750}
                    fadeOutDuration={2000}
                    opacity={0.8}
                    textStyle={{ color: 'white' }}
                />
            </SafeAreaView>
        );
    }
}))

const styles = StyleSheet.create({
    rowView: {
        flexDirection: 'row', width: 800, height: 50, justifyContent: 'center', alignItems: 'center',
    },
    rowLeftView: {
        flex: 0.3, alignItems: 'flex-end', justifyContent: 'center',
    },
    rowRightView: {
        flex: 0.6, flexDirection: 'row', marginLeft: 40, alignItems: 'center'
    },
    rowTitleView: {
        color: colors.buttonColor, fontSize: 20
    },
    inputTextBorder: {
        width: 350, height: 40, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', borderWidth: 1, borderColor: colors.buttonColor, borderRadius: 10
    },
    inputTextView: {
        color: colors.buttonColor,
        width: 350,
        height: 40,
        fontSize: 20,
        marginLeft: 10,
        marginBottom: Platform.OS === 'ios' ? 3 : 0,
        paddingVertical: 0,
    }
});

export default InputClientData