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


class Setmpin extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        loading: false,
        mpin: "",
        confirmMpin: "",
        valid: ""
    }

    componentDidMount() {
        DB.set('set_mpin', 'true', success => {}, error => {})
    }

    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 => {
                        DB.set('set_mpin', 'false', onSuccess => {}, onError => {})
                        this.getUserInfo(onSuccess => {
                            this.setState({ loading: false })
                            if(this.props.route.params == undefined) {
                                this.props.navigation.reset({
                                    index: 0,
                                    routes: [{name: 'Mpin'}],
                                })
                            } else {
                                if(
                                    this.props.route.params.type != undefined && 
                                    this.props.route.params.type == "addcard"
                                ) {
                                    this.props.navigation.reset({
                                        index: 0,
                                        routes: [{name: 'Mpin'}],
                                    })
                                } else {
                                    this.props.navigation.reset({
                                        index: 0,
                                        routes: [{name: "OnBoarding", params: { token: this.props.route.params?.token }}],
                                    });        
                                }
                            }
                        }, onError => {
                            this.setState({ loading: false })
                        })
                    }, error => {
                        Platform.OS == 'ios' ? setTimeout(() => {
                            Alert.alert("Mpin.", '\n' + "Failed to set mpin. Please try again.")
                          }, 300) : Alert.alert("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 SESSION = await DB.session()
        const { mpin } = this.state
        const lcard_uuid = this.props.route.params?.sessiondata?.lcard_uuid || SESSION.user.lcard_uuid

        this.getCurrentUserInfo(async (onSuccess) => {
            let hash = onSuccess.data.customer_number.substring(0, 8)
            let ciphermpin = Crypto.encrypt(mpin, hash)
            const params = {
                lcard_uuid: 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)
                    console.log("Error saving profile", error)
                })            
            }
        })
        .catch(error => errorCallback(error))
    }

    showContent = () => {
        return (
            <ScrollView style={{ flex: 1 }}>
                <View style={{ flex: 1, marginTop: 45, }}>
                    <Text style={{ 
                        padding: 10, 
                        textAlign: 'center', 
                        fontFamily: 'arial', 
                        fontSize: 16, fontStyle: 'italic', 
                        marginBottom: 50, 
                        marginHorizontal: 30, 
                        fontWeight: 'bold', 
                        // color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black 
                        color: Theme.colors.black 
                    }}
                    >
                        To keep your app secure, you will be asked for an MPIN to open your app.
                    </Text>
                    <View style={{ flex: 1, alignItems: 'center' }}>
                        <Text style={
                            { 
                                padding: 15, 
                                alignSelf: 'flex-start', 
                                fontFamily: 'arial', 
                                fontSize: 16, marginLeft: 40, 
                                color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', 
                                // color: 'gray',
                                marginBottom: 15 
                            }}
                            >Enter 4-digit MPIN
                        </Text>
                        <CustomOTPInput
                            secureTextEntry={true}
                            containerStyle={{ marginBottom: 30 }} 
                            // textColor={this.props.app_theme?.theme.colors.text}
                            textColor={{ color: 'gray' }}
                            // isDarkMode={this.props.app_theme?.theme.dark}
                            isDarkMode={true}
                            onChangeText={(v) => {
                                this.setState({ mpin: v, valid: v.length == 4 ? true : false })
                            }}/>
                        <Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
                        <CustomOTPInput 
                            secureTextEntry={true}
                            // textColor={this.props.app_theme?.theme.colors.text}
                            textColor={{ color: 'gray' }}
                            // isDarkMode={this.props.app_theme?.theme.dark}
                            isDarkMode={true}
                            onChangeText={(v) => {
                                this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
                            }}/>
                        {(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>
                </View>
            </ScrollView>
        )
    }

    render() {
        return(
            <CustomSafeArea>
                <CustomHeader title="Set your mobile PIN" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />

                <Elements.loaderView 
                    title="Validating"
                    message="Please wait..."
                    isDarkMode={true}
                    backgroundColor={Theme.colors.white}
                    // color={this.props.app_theme?.theme.colors.text}
                    color={Theme.colors.black }
                    visible={this.state.loading} />
                    {
                        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"
                            backgroundColor: this.state.valid ? Theme.colors.primary : Theme.colors.primary + "15"
                        }}
                    >
                        <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>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)(Setmpin)