import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Styled from 'styled-components/native';
import { downloadAction } from '~/GlobalReducers/download';
import WebView from 'react-native-webview';
import { Config } from '~/Configuration';

const Container = Styled.View`
    position: absolute;
    left:0px; bottom:0px; width:0px; height:0px;
    overflow: hidden;
`;

export const useDownload = () => {
    const payload = useSelector(({GlobalDownload}) => GlobalDownload.download);
    const dispatch = useDispatch();
    const download = useCallback((payload) => dispatch(downloadAction(payload)), []);

    const downloadFromPath = ({path, name, onStart=(event)=>{}, onComplete=(event)=>{}, onHttpError=(event)=>{}, onError=(event)=>{}}) => {
        download({ 
            source:{uri:`${Config.BASE_URL}/api/FileDownload/DownloadFile?filePath=${encodeURIComponent(path)}&fileName=${encodeURIComponent(name)}&dummy=${Math.random()}`}, 
            onStart:(event)=>{ console.log('download start'); onStart(event); },
            onComplete:(event)=>{ console.log('download complete'); onComplete(event); },
            onHttpError:(event)=>{ console.log('download http error'); onHttpError(event); },
            onError:(event)=>{ console.log('download error'); onError(event); },
        });
    }

    const downloadFromUrl = ({url, onStart=(event)=>{}, onComplete=(event)=>{}, onHttpError=(event)=>{}, onError=(event)=>{}}) => {
        download({ 
            source:{uri:url}, 
            onStart:(event)=>{ onStart(event); },
            onComplete:(event)=>{ onComplete(event); },
            onHttpError:(event)=>{ onHttpError(event); },
            onError:(event)=>{ onError(event); },
        });
    }

    return { downloadFromPath:downloadFromPath, downloadFromUrl:downloadFromUrl };
}

export const DownloadProvider = () => {
    const payload = useSelector(({GlobalDownload}) => GlobalDownload.download);
    const dispatch = useDispatch();
    const download = useCallback((payload) => dispatch(downloadAction(payload)), []);

    return (
        <Container>
            <WebView originWhitelist={['*']}
                source={payload.source}
                style={{display:'none', height:100}}
                onLoadStart={(event) => {
                    if(payload.onStart && typeof payload.onStart === 'function') {
                        payload.onStart(event);
                    }
                }}
                onLoadEnd={(event) => {
                    if(payload.onComplete && typeof payload.onComplete === 'function') {
                        payload.onComplete(event);
                    }
                }}
                onError={(event) => {
                    if(payload.onError && typeof payload.onError === 'function') {
                        payload.onError(event);
                    }
                }}
                onHttpError={(event) => {
                    if(payload.onHttpError && typeof payload.onHttpError === 'function') {
                        payload.onHttpError(event);
                    }
                }} />
        </Container>
    );
}