import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView, SafeAreaView, TextInput, Alert } from 'react-native';
import { connect } from "react-redux";
import moment from 'moment';
import Elements from '../../components/elements.js';
import NetInfo from "../../components/netstatus";
import REQUEST from '../../components/api/';
import Icon from './../../components/icons.js';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component.js';

const CustomInput = (props) => {
    const titlecolor = props.current == props.index && props.focus ? Theme.colors.darkGray : Theme.colors.darkGray
    const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.darkGray : 'gray')
    const borderwidth = props.error ? 1.6 : (props.focus && props.current == props.index ? 1.5 : 1)
  
    const style = {
      container: {flexDirection: 'row', width: '80%', marginTop: props.top || 30, alignItems: 'center'},
      title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
      input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props?.isDarkMode ? props?.textColor : Theme.colors.black },
      error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15}
    }
  
    return (
      <View style={style.container}> 
        <View style={{flex: 1}}>
            {props.current >= props.index ? 
                <Text style={style.title}>
                {props.title}
                </Text> : null}
            <TextInput
                keyboardType={props.keyboardType || null}
                maxLength={props.maxlength || null} 
                placeholder={props.placeholder || props.title || null}
                placeholderTextColor={Theme.colors.darkGray}
                value={props.value || null}
                onFocus={props.onFocus || null}
                onChangeText={props.onChangeText || null}
                style={[style.input, props.textInputStyle || null]}
            />
            {props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
        </View>
      </View>)
}

class SecurityQuestion extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        loading: false,
        email: null,
        birthdate: null,
        openDatepicker: false,
        error: null,
        valid: true,
    }

    componentDidMount() {
        this.setState({ data: this.props.route.params })
        console.log(this.props.route)
    }

    componentWillUnmount() {

    }

    checkValidAccountInfo = () => {
        return (this.state.email && this.state.birthdate)
    }

    submitAccountInfo = () => {
        NetInfo.netstatus(async isConnected => {
            if(isConnected) {
                this.setState({ loading: true })
                this.requestUpdateAccountInfo(success => {
                    this.setState({ loading: false })
                    if(success.status == 1) {
                        this.props.navigation.navigate("Setnewmpin", { sessiondata: this.state.data })
                    } else {
                        Platform.OS == 'ios' ? setTimeout(() => {
                            Alert.alert("Account Information.", success.message)
                          }, 300) : Alert.alert("Account Information.", success.message)
                    }
                }, error => {
                    this.setState({ loading: false })
                    Platform.OS == 'ios' ? setTimeout(() => {
                        Alert.alert("Account Information.", "Failed to submit account information")
                      }, 300) : Alert.alert("Account Information.", "Failed to submit account information")
                })
            } else {
                this.setState({ loading: false })
                Elements.nointernet2(this.props)
            }
        })
    }

    requestUpdateAccountInfo = async (successCallback, errorCallback) => {
        const SESSION = await DB.session()
        const params = {
            card_number: this.props.route.params.card_number,
            birthdate: moment(this.state.birthdate).format("YYYY-MM-DD"),
            email_address: this.state.email
        }
        await REQUEST("security_question", "post", {
            Authorization: SESSION.token,
        }, {}, params, function(data){
            console.log(data)
            successCallback(data)
        }, function(error){
            console.log(error)
            errorCallback(error)
        })
    }

    render() {
        return(
            <CustomSafeArea>
                <View>
                    <View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
                        <TouchableOpacity
                        style={{ alignSelf: 'center', padding: 15}}
                        onPress={() => {
                            this.props.navigation.reset({
                                index: 0,
                                routes: [{name: 'Mpin'}],
                            });
                        }}>
                            <Icon.AntDesign name='arrowleft' size={20} style={{color: "#FFF"}} />
                        </TouchableOpacity>
                        <View style={{flex:5, justifyContent: 'center', alignItems: 'center'}}>
                            <Text style={{textAlign:'center', fontSize: 17, color: '#fff'}}>Account Information</Text>
                        </View>
                        <TouchableOpacity
                            style={{ alignSelf: 'center', padding: 15}}
                            onPress={() => {}}>
                        </TouchableOpacity>
                    </View>
                </View>
                <Elements.loaderView 
                    title="Validating"
                    message="Please wait..."
                    isDarkMode={this.props.app_theme?.theme.dark}
                    backgroundColor={this.props.app_theme?.theme.colors.border}
                    color={this.props.app_theme?.theme.colors.text}
                    visible={this.state.loading} />
                <ScrollView>
                    <View style={{ flex: 1, marginTop: 30}}>
                        <View style={{ flex: 1, alignItems: 'center' }}>
                            <Text style={{ alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, width: '80%', alignSelf: 'center', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>What email address did you use to register to Unioil?</Text>
                            <CustomInput
                                textInputStyle={{ paddingBottom: 10 }}
                                title="Enter Answer"
                                value={this.state.email}
                                index={3}
                                textColor={this.props.app_theme?.theme.colors.text}
                                isDarkMode={this.props.app_theme?.theme.dark}
                                error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
                                errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
                                onChangeText={(val) => {
                                    this.setState({ email: val, valid: true })
                                }}/>
                            <Text style={{ alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, width: '80%', alignSelf: 'center', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, marginTop: 40 }}>When is your Birthday?</Text>
                            <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
                                <View style={{flex: 1}}>
                                <TouchableOpacity onPress={() => {
                                    this.setState({ openDatepicker: true })
                                    if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
                                }} style={{}}>
                                    {/* <Text style={{fontSize: 14, color: Theme.colors.darkGray}}>Birthday</Text> */}
                                    <View style={{paddingTop: 15, paddingBottom: 5,borderColor: 'gray',borderBottomWidth: 1}}>
                                        <Text style={{paddingBottom: 5, fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Enter your Birthday"}</Text>
                                    </View>
                                </TouchableOpacity>
                                {this.state.errors && this.state.errors.birthdate ? 
                                <Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
                                {this.state.errors?.birthdate[0]}
                                </Text> : null}
                                </View>
                            </View>
                        </View>
                    </View>
                </ScrollView>
                <Elements.CustomDatePicker 
                    visible={this.state.openDatepicker}
                    date={this.state.birthdate ? new Date(this.state.birthdate) : new Date(Date.now())} 
                    textColor={this.props.app_theme?.theme.colors.text}
                    isDarkMode={this.props.app_theme?.theme.dark}
                    modalBackgroundColor={this.props.app_theme?.theme.colors.border}
                    onConfirm={(selectedDate) => {
                        this.setState({ birthdate: selectedDate ? moment(selectedDate).format("DD MMM YYYY") : this.state.birthdate != null ? this.state.birthdate : null, openDatepicker: false })
                    }}
                    onCancel={() => this.setState({ openDatepicker: false })}/>
                {/* <TouchableOpacity style={{ marginHorizontal: 30, 
                    padding: 20, 
                    backgroundColor: this.state.valid && this.checkValidAccountInfo() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", a
                    lignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.submitAccountInfo()}>
                    <Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white  }}>Submit</Text>
                </TouchableOpacity> */}

                <View style={{ alignItems: 'center', marginBottom: 30 }}>
                    <TouchableOpacity disabled={!(this.state.valid && this.checkValidAccountInfo())} onPress={() => this.submitAccountInfo()} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: this.state.valid && this.checkValidAccountInfo() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
                        <Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Submit</Text>
                    </TouchableOpacity>
                </View>
            </CustomSafeArea>
        )
    }
}

const mapStateToProps = (state) => {
    return {
      app_theme: state.appThemeReducer.theme
    }
}

export default connect(mapStateToProps, null)(SecurityQuestion)