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

const Container = Styled.View`
    flex:1;
    background-color:black;
`;

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>
            {Platform.OS === 'ios' ? (
            <WebView
                originWhitelist={['*']}
                source={{ html: 
                    `<!DOCTYPE html>
                    <html style='width:100%; height:100%'>
                    <head></head>
                    <body style='background-color:black; width:100%; height:100%;'>
                        <div style='display:flex; width:100%; height:100%; justify-content:center; align-items:center'>
                            <img src='${source.uri}' style='width:100%' />
                        </div>
                    </body>
                    </html>`
                }}
                style={{ flex:1, width:Util.getScreenWidth() }}
            />
            ) : (
            <WebView
                originWhitelist={['*']}
                source={{ uri: source.uri }}
                style={{ flex:1, width:Util.getScreenWidth() }}
            />
            )}
            {loading && <ActivityIndicator size="large" color="white" style={{ position: 'absolute', alignSelf: 'center', alignContent: 'center' }} />}
        </Container>
    )
}