import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';
import axios from 'axios';

const MyWebComponent = () => {
    const webViewRef = useRef(null);

    const handleMessage = (event) => {
        const { data } = event.nativeEvent;
        const parsedData = JSON.parse(data);

        if (parsedData.type === 'scrollPosition') {
            saveScrollPosition(parsedData.position);
        }
    };

    const saveScrollPosition = async (position) => {
        try {
            await axios.post('https://your-api.com/save-position', { position });
        } catch (error) {
            console.error('Error saving position:', error);
        }
    };

    const injectedJavaScript = `
        document.addEventListener('scroll', () => {
            const scrollY = window.scrollY || document.documentElement.scrollTop;
            window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'scrollPosition', position: scrollY }));
        });
        true;
    `;

    return (
        <WebView
            ref={webViewRef}
            source={{ uri: 'https://your-web-content.com' }}
            onMessage={handleMessage}
            injectedJavaScript={injectedJavaScript}
        />
    );
};

export default MyWebComponent;