import React, { useEffect, useState, useRef } from 'react';
import Styled from 'styled-components/native';
import { Image, ActivityIndicator, PixelRatio, ImageBackground } from 'react-native';
import WebView from 'react-native-webview';
import { Util } from '~/Utils/utils';

const Container = Styled.View`
    flex:1;
`;

export const ImageViewer = ({source}) => {
    const [loading, setLoading] = useState(false);
    const [imageSize, setImageSize] = useState({width:0,height:0});

    useEffect(() => {
        Image.getSize(source.uri, (width, height) => {
            console.log(`pixel ratio : ${PixelRatio.get()}`);
            setImageSize({width: width, height:height});
        });

    }, [source]);

    console.log(source);

    return (
        <Container>
            <WebView
                originWhitelist={['*']}
                source={{ uri: source.uri /*html: 
                    `<!DOCTYPE html>
                    <html style='width:100%; height:100%'>
                    <head></head>
                    <body style='background-color:black;border:1px solid red'>
                        <img src='https://api.i-fms.net/files/2/25089.jpg' style='width:100%' />
                    </body>
                    </html>` */
                }}
                style={{ flex:1, width:Util.getScreenWidth(), borderWidth:1, borderColor:'yellow' }}
            />
            {loading && <ActivityIndicator size="large" color="white" style={{ position: 'absolute', alignSelf: 'center', alignContent: 'center' }} />}
        </Container>
    )
}