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";
import Pdf from "react-native-pdf";

const PDFViewerScreen = ({
                           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}>
                <Pdf
                    source={{uri: url}}
                    onLoadComplete={(numberOfPages,filePath) => {
                        console.log(`Number of pages: ${numberOfPages}`);
                    }}
                    onPageChanged={(page,numberOfPages) => {
                        console.log(`Current page: ${page}`);
                    }}
                    onError={(error) => {
                        console.log(error);
                    }}
                    onPressLink={(uri) => {
                        console.log(`Link pressed: ${uri}`);
                    }}
                    style={styles.webview}/>
            </View>
        </ScreenComponent>
    );
};

export default connect(null, null)(PDFViewerScreen);

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,
    },
});