import React from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import PropTypes from 'prop-types';

export const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	webViewStyle: {
		flex: 1,
	},
	ActivityIndicatorStyle: {
		position: 'absolute',
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
		alignItems: 'center',
		justifyContent: 'center',
	},
});

const activityIndicatorLoadingView = () =>
	(
		<ActivityIndicator
			color="#65b2e4"
			size="large"
			style={styles.ActivityIndicatorStyle}
		/>
	);

class WebViewComponent extends React.Component {
	static propTypes = {
		url: PropTypes.string.isRequired,
	}

	render() {
		return (
			<View style={styles.container}>
				<WebView
					source={{ uri: this.props.url }}
					style={styles.webViewStyle}
					renderLoading={activityIndicatorLoadingView}
					startInLoadingState
					javaScriptEnabled
					domStorageEnabled
					cacheEnabled={false}
					showsVerticalScrollIndicator={false}
					showsHorizontalScrollIndicator={false}
				/>
			</View>
		);
	}
}

export default WebViewComponent;
