import React, {useState, useEffect, useCallback} from 'react';
import {ActivityIndicator, Platform, Alert, ProgressBarAndroid, Dimensions, StyleSheet, View, Text,} from 'react-native';
import WebView from 'react-native-webview';
import {connect, useDispatch} from 'react-redux';
import {createStructuredSelector} from 'reselect';
import {ScreenComponent} from "../components/ScreenComponent";
import {readUser} from "../webservice/AuthApi";
import queryString from 'query-string';
import I18n from "react-native-i18n";
import {bindActionCreators} from "redux";
import {  envoieUserWalletToCardAction, getCommissionUserWalletToCardAction } from "../webservice/EnvoieUserApi"

//import { payment_transaction } from '../webservice/agent/RetraitCarteVersWalletApi';


const WebviewScreen = ({
                                navigation,
                                // route,
                                // paypalValidPayment,
                                // fetchPaypalValidPayment,
                                getCommissionUserWalletToCardAction,
                               // payment_transaction,
                               envoieUserWalletToCardAction,
                                saveAvis
                                
                            }) => {
    let webviewRef = null;
    const dispatch = useDispatch();
    const [backButtonEnabled, setBackButtonEnabled] = useState(false);
    const {url, requestBody,} = navigation.state.params;

    console.log("URL loaded", url);

  
    //useEffect(
        // useCallback(() => {
        //     const onBackPress = () => {
        //         if (backButtonEnabled) {
        //             webviewRef?.goBack();
        //         } else {
        //             navigation.goBack();
        //         }
        //         return false;
        //     };
        //     BackHandler.addEventListener('hardwareBackPress', onBackPress);
        //     return () =>
        //         BackHandler.removeEventListener(
        //             'hardwareBackPress',
        //             onBackPress,
        //         );
        // }, []);
        // useCallback(() => {
            useCallback(() => {
            if(saveAvis.result !== null) {
                Alert.alert(
                    I18n.t("SUCCESS"),
                    saveAvis.result.response,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                readUser().then(() => {
                                    if (user) {
                                        if (user !== undefined) {
                                            getCommissionUserWalletToCardAction(user.phone, 0)
                                        }
                                    }
                                });
                                navigation.goBack()
                            }
                        }
                    ],
                    {cancelable: false}
                );
            }
    
            if(saveAvis.error !== null) {
                Alert.alert(
                    I18n.t("ERROR_TREATMENT_REQUEST"),
                    saveAvis.error.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                navigation.goBack();
                            }
                        }
                    ],
                    {cancelable: false}
                )
            }
        });
     
        
   
    

    const renderLoader = () => (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        {Platform.OS === 'android'
            ?
            (
                <>
                    <ProgressBarAndroid/>
                    <Text>{I18n.t('LOADING_DOTS')}</Text>

                </>
            ) :
            <>
                <ActivityIndicator size="large" color={'#ccc'}/>
                <Text>{I18n.t('LOADING_DOTS')}</Text>
            </>
        }
    </View>
    )
    const checkPaymentStatus = webViewState => {
        console.log('URL', webViewState.url)

        if(webViewState.url.includes('status')) {

            const params = queryString.parse(webViewState.url);
            let status = '';
            let transaction_id = '';
            const keys = Object.keys(params);
            keys.forEach(elt => {
                if (elt.includes('status')) status = params[elt];
                if (elt.includes('transaction_id')) transaction_id = params[elt];
            });

            if(status === '0') {
                navigation.goBack()
                Alert.alert(I18n.t('PAYMENT_ERROR'), I18n.t('PAYMENT_COULD_NOT_MADE'), [{text:"Ok",onPress:()=>{}}])
            }
            else if(status === '1') {
                 navigation.goBack()
                envoieUserWalletToCardAction({
                    payment_transaction_id: transaction_id,
                    ...requestBody
                }, true)
                // console.warn("webViewState.requestBody: ", requestBody)
                // console.warn("webViewState.requestBody: ", transaction_id)

             
            }
        }
        else {

        }
    };

    return (
        <ScreenComponent>
            <View style={styles.contain}>
                <WebView
                    source={{uri: url}}
                    style={styles.webview}
                    ref={ref => {
                        webviewRef = ref;
                    }}
                    javaScriptEnabled
                    domStorageEnabled
                    onNavigationStateChange={webViewState => {
                        checkPaymentStatus(webViewState);
                    }}
                    renderLoading={() => (
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: -42}}>
                        {Platform.OS === 'android'
                            ?
                            (
                                <>
                                    <ProgressBarAndroid/>
                                    <Text>{I18n.t('LOADING_DOTS')}</Text>
        
                                </>
                            ) :
                            <>
                                <ActivityIndicator size="large" color={'#ccc'}/>
                                <Text>{I18n.t('LOADING_DOTS')}</Text>
                            </>
                        }
                    </View>
                        
                    )}
                    startInLoadingState
                />
            </View>

                </ScreenComponent>
          
    );
};
const mapStateToProps = state => ({
    saveAvis: state.modifyAvisImpositionReducer

});

const mapDispatchToProps = dispatch => bindActionCreators({
    //payment_transaction,
    envoieUserWalletToCardAction,
    getCommissionUserWalletToCardAction
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(WebviewScreen);

const styles = StyleSheet.create({
    contain: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 20,
        paddingRight: 20,
    },
    contentModal: {
        width: '100%',
        borderRadius: 8,
        padding: 8,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 20,
    },
    contentAction: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        paddingTop: 24,
    },
    webview: {
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
    },
});