import React, { useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import Spinner from 'react-native-spinkit';
import { useTheme } from '../theme/ThemeProvider';
import { AppShadow } from '../constants/commonStyle';

interface AppLoaderProps {
	isLoading?: boolean;
}

const AppLoader: React.FC<AppLoaderProps> = ({ isLoading }) => {

	const { Colors, isDarkMode } = useTheme();
	const styles = useMemo(() => createStyles(Colors), [Colors]);

	return (
		<View style={styles.container}>
			{isLoading && (
				<View style={styles.overlayContainer}>
					<Spinner
						isVisible={isLoading}
						size={24} type={'Wave'}
						color={Colors.primary}
					/>
				</View>
			)}
		</View>
	);
};

const createStyles = (Colors: any) => {
	return StyleSheet.create({
		container: {
			zIndex: 9999,
			pointerEvents: 'none',
			position: 'absolute',
			top: 0, bottom: 0,
			left: 0, right: 0,
			justifyContent: 'center',
			alignItems: 'center'
		},
		overlayContainer: {
			...AppShadow,
			padding: 15,
			backgroundColor: 'rgba(255,255,255,1)',
			borderRadius: 5
		}
	});
};

export default AppLoader;