import React, {useEffect, useState} from 'react';
import {ActivityIndicator, Dimensions, StyleSheet, View,} from 'react-native';
import WebView from 'react-native-webview';
import {connect, useDispatch} from 'react-redux';
import {createStructuredSelector} from 'reselect';
import {ScreenComponent} from "../components/ScreenComponent";

const WebviewScreen = ({
                                navigation,
                                route,
                                paypalValidPayment,
                                fetchPaypalValidPayment,
                            }: any) => {
    let webviewRef = null;
    const dispatch = useDispatch();
    const [backButtonEnabled, setBackButtonEnabled] = useState(false);
    const {url, title} = navigation.state.params;

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

/*    useFocusEffect(
        useCallback(() => {
            const onBackPress = () => {
                if (backButtonEnabled) {
                    webviewRef?.goBack();
                } else {
                    navigation.goBack();
                }
                return false;
            };
            BackHandler.addEventListener('hardwareBackPress', onBackPress);
            return () =>
                BackHandler.removeEventListener(
                    'hardwareBackPress',
                    onBackPress,
                );
        }, []),
    );*/
    

    const renderLoader = () => (
        <ActivityIndicator size="small" />
    );

    return (
        <ScreenComponent>
            <View style={styles.contain}>
                <WebView
                    source={{uri: url}}
                    style={styles.webview}
                    ref={ref => {
                        webviewRef = ref;
                    }}
                    javaScriptEnabled
                    domStorageEnabled
                    onNavigationStateChange={webViewState => {
                        setBackButtonEnabled(true);
                    }}
                    renderLoading={renderLoader}
                    startInLoadingState
                />
            </View>
        </ScreenComponent>
    );
};

export default connect(null, null)(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,
    },
});