/**
 * Project iLinkWorld
 * File SpinnerOverlayComponent
 * Path components
 * Created by BRICE ZELE
 * Date: 01/02/2022
 */
import React, {ReactNode} from 'react';
import {ActivityIndicator, Modal, View} from 'react-native';
import Text from './Text';
import I18n from "react-native-i18n";

interface SpinnerOverlayProps {
    show: boolean;
    color?: string;
    backgroundColor?: string;
    dimLights?: number;
    children: ReactNode;
    loadingMessage?: string;
}

const SpinnerOverlay = ({
                                    show = false,
                                    color = '',
                                    backgroundColor = '',
                                    dimLights = 0.6,
                                    loadingMessage = '',
                                    children = null
                                }: SpinnerOverlayProps) => {
    return (
        <Modal transparent animationType="none" visible={show}>
            <View
                style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: `rgba(0,0,0,${dimLights})`,
                }}>
                <View
                    style={{
                        padding: 13,
                        backgroundColor: `transparent`,
                        borderRadius: 13,
                    }}>
                    {children !== null ?
                        React.Children.map(children, child =>
                            React.cloneElement(child, {}),
                        )
                        :
                        <ActivityIndicator
                            animating={show}
                            color="white"
                            size="large"
                        />
                    }
                    <Text style={{color: 'white'}}>
                        {loadingMessage === ''
                            ? I18n.t('LOADING_DOTS')
                            : loadingMessage}
                    </Text>

                </View>
            </View>
        </Modal>
    );
};

export default SpinnerOverlay;