import * as React from 'react';
import { 
    View, 
    Text, 
    TouchableOpacity, 
    ScrollView, 
    TextInput, 
    StyleSheet, 
    Alert, 
    Dimensions, 
    Platform
} from 'react-native';
import { Icon, KeyboardAvoidingView } from 'native-base';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import Crypto from '../../components/crypto.js';
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import NetInfo from "../../components/netstatus";
import REQUEST from '../../components/api/';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage';
import Icons from '../../components/icons';
import CustomSafeArea from '../../components/safeArea.component';

class Setnewmpin extends React.Component {
    constructor(props) {
        super(props)
    }

    state = {
        loading: false,
        mpin: "",
        confirmMpin: "",
        valid: "",
        activeInput: -1,
        showPass1: false,
        showPass2: false
    }

    componentDidMount() {
        
    }

    componentWillUnmount() {

    }

    checkValidMpin = () => {
        if(this.state.mpin.length < 4 || this.state.mpin == null) return false
        return this.state.mpin == this.state.confirmMpin
    }

    setAppMpin = () => {
        if(this.checkValidMpin()) {
            NetInfo.netstatus(async isConnected => {
                if(isConnected) {
                    this.setState({ loading: true })
                    this.requestSetMpin(success => {
                        this.getUserInfo(onSuccess => {
                            this.setState({ loading: false })
                            this.props.navigation.navigate('SuccessUpdateMpin')
                        }, onError => {
                            this.setState({ loading: false })
                        })
                    }, error => {
                        this.setState({ loading: false })
                        Platform.OS == 'ios' ? setTimeout(() => {
                            Alert.alert("New Mpin.", '\n' + "Failed to set mpin. Please try again.")
                        }, 300) : Alert.alert("New Mpin.", '\n' + "Failed to set mpin. Please try again.")
                    })
                } else {
                    this.setState({ loading: false })
                    Elements.nointernet2(this.props)
                }
            })
        } else {
            Platform.OS == 'ios' ? setTimeout(() => {
                Alert.alert("Mpin.", '\n' + "Please ensure that your MPIN is matched")
              }, 300) : Alert.alert("Mpin.", '\n' + "Please ensure that your MPIN is matched")
        }
    }

    requestSetMpin = async (successCallback, errorCallback) => {
        const { mpin } = this.state
        this.getCurrentUserInfo(async (onSuccess) => {
            let hash = onSuccess.data.customer_number.substring(0, 8)
            let ciphermpin = Crypto.encrypt(mpin, hash)
            const params = {
                lcard_uuid: this.props.route.params.sessiondata.lcard_uuid,
                mpin: ciphermpin
            }
            await REQUEST("setup_mpin", "post", {}, {}, params, function(data){
                successCallback(data)
            }, function(error){
                errorCallback(error)
            }, "MPIN", "Setup")
        }, (onError) => {
            errorCallback(onError)
        })
    }

    getCurrentUserInfo = async (successCallback, errorCallback) => {
        const SESSION = await DB.session()
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(data => {
            if(data.status == 1) {
                successCallback(data)
            } else {
                errorCallback({})
            }
        })
        .catch(error => errorCallback(error))
    }

    getUserInfo = async (successCallback, errorCallback) => {
        const SESSION = await DB.session()
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(data => {
            if(data.status == 1) {
                DB.updateProfile(data, res => {
                    this.setState({ loading: false })
                    successCallback(data)
                }, error => {
                    this.setState({ loading: false })
                    errorCallback(error)
                })            
            }
        })
        .catch(error => errorCallback(error))
    }

    onInputFocus = (x) => {
        this.setState({ activeInput: x })
    }

    onBackToPrevious = () => {
        Alert.alert(
            '',
            'Are you sure you want to cancel?',
            [
                {
                    textStyle: 'cancel',
                    text: 'Cancel'
                },
                {
                    text: 'Ok',
                    onPress: async () => {
                        this.props.navigation.navigate('Mpin')
                    },
                },
            ],
            {cancelable: true},
        );
    }

    showContent = () => {
        return (
            <ScrollView style={{ flex: 1 }}>
                <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} />
                <View style={{ flex: 1, marginTop: 25, }}>
                    <Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 20, marginBottom: 10, marginHorizontal: 30, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>Set new MPIN</Text>
                    <Text style={{ padding: 5, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 35, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>In order to protect your account, make sure your password:</Text>
                    <Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Is not weak and easy to guess.</Text>
                    <Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Do not use MPIN such as 1234.</Text>
                    <Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginBottom: 30, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Do not use your birthdate.</Text>
                    
                    <Text style={{ padding: 10, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>New MPIN</Text>
                    <View style={{ width: '75%', marginTop: 20, marginLeft: 35, borderBottomColor: this.state.activeInput == 1 ? Theme.colors.accent : "gray", borderBottomWidth: this.state.activeInput == 1 ? 1.5 : 1, paddingBottom: 5, flexDirection: 'row' }}>
                        <TextInput
                            returnKeyType='done'
                            keyboardType="numeric"
                            placeholder="Enter new MPIN"
                            placeholderTextColor="gray"
                            secureTextEntry={this.state.showPass1 ? false : true}
                            maxLength={4}
                            onFocus={() => this.onInputFocus(1)}
                            onBlur={() => {
                                this.setState({ activeInput: -1 })
                            }}
                            onChangeText={(v) => {
                                let value = v.includes(".") ? v.replace(".", "") : v
                                this.setState({ mpin: value, valid: value.length == 4 ? true : false })
                            }}
                            style={{ color: this.props.app_theme?.theme.dark ? Theme.colors.white : Theme.colors.black, fontSize: 17, flex: 1}}
                        />
                        <View style={{alignItems: 'flex-end', justifyContent: 'center'}}>
                            <TouchableOpacity onPress={() => this.setState({ showPass1: !this.state.showPass1 })}>
                                <Icons.FontAwesome name={!this.state.showPass1 ? "eye" : "eye-slash"} size={15} />
                            </TouchableOpacity>
                        </View>
                    </View>

                    <Text style={{ marginTop: 20, padding: 10, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 25, color: Theme.colors.black, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>Verify MPIN</Text>
                    <View style={{ width: '75%', marginTop: 20, marginLeft: 35, borderBottomColor: this.state.activeInput == 2 ? Theme.colors.accent : "gray", borderBottomWidth: this.state.activeInput == 2 ? 1.5 : 1, paddingBottom: 5, flexDirection: 'row' }}>
                        <TextInput
                            returnKeyType='done'
                            keyboardType="numeric"
                            placeholder="Verify your new MPIN"
                            placeholderTextColor="gray"
                            secureTextEntry={this.state.showPass2 ? false : true}
                            maxLength={4}
                            onFocus={() => this.onInputFocus(2)}
                            onBlur={() => {
                                this.setState({ activeInput: -1 })
                            }}
                            onChangeText={(v) => {
                                let value = v.includes(".") ? v.replace(".", "") : v
                                this.setState({ confirmMpin: value, valid: value.length == 4 ? true : false })
                            }}
                            style={{ color: this.props.app_theme?.theme.dark ? Theme.colors.white : Theme.colors.black, fontSize: 17, flex: 1}}
                        />
                        <View style={{alignItems: 'flex-end', justifyContent: 'center'}}>
                            <TouchableOpacity onPress={() => this.setState({ showPass2: !this.state.showPass2 })}>
                                <Icons.FontAwesome name={!this.state.showPass2 ? "eye" : "eye-slash"} size={15} />
                            </TouchableOpacity>
                        </View>
                    </View>
                    {(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
                        <Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
                    )}
                </View>
            </ScrollView>
        )
    }

    render() {
        return(
            <CustomSafeArea>
                <CustomHeader 
                    title="Account Recovery" 
                    menu={false} 
                    back={true} 
                    backscreen="" 
                    onBackPress={() => this.props.navigation.reset({index: 0, routes: [{name: "Mpin"}]})}
                    navigation={this.props.navigation} 
                />

                {
                    Theme.platform === "android" ?
                        this.showContent()
                        :
                        <KeyboardAvoidingView 
                            style={{flex: 1}}
                            behavior='padding'
                            keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
                        >
                            {this.showContent()}
                        </KeyboardAvoidingView>
                }
                <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
                    <TouchableOpacity onPress={() => this.setAppMpin()} disabled={!this.checkValidMpin()} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center'}}>
                        <Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white  }}>Submit</Text>
                    </TouchableOpacity>
                </View>
            </CustomSafeArea>
        )
    }
}

const mapStateToProps = (state) => {
    return {
      userinfo: state.appUserInfoReducer.userinfo,
      app_theme: state.appThemeReducer.theme
    }
  }
  
const mapDispatchToProps = {
    saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(Setnewmpin)

export const styles = StyleSheet.create({

})