import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import { Text } from "./Text";
import { InlineButton } from "./InlineButton";
import { Spinner } from "./Spinner";

class ImageUploadProgress extends Component {
	onRetryUpload = (imageUri, uploadUri) => {
		this.props.uploader.retryUpload(imageUri, uploadUri);
	};

	render() {
		const { color, image, style, progressTextStyle, retryTextStyle } =
			this.props;
		const { imageUri, uploadUri, uploadProgress, allowRetry } = image;

		return (
			<View style={[styles.container, style]}>
				<Spinner style={styles.spinner} />
				<Text style={[styles.uploadProgressText, progressTextStyle, { color }]}>
					{uploadProgress}
				</Text>
				{allowRetry && (
					<InlineButton
						color={color}
						onPress={() => this.onRetryUpload(imageUri, uploadUri)}
						touchableStyle={styles.retryButton}
					>
						<Text style={[styles.retryText, retryTextStyle]}>Retry</Text>
					</InlineButton>
				)}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		alignItems: "center",
		justifyContent: "center",
	},
	spinner: {
		flex: 0,
	},
	uploadProgressText: {
		textAlign: "center",
		fontFamily: "sf-semibold",
		fontSize: 12,
	},
	retryButton: {
		marginTop: 10,
	},
	retryText: {
		fontFamily: "sf-semibold",
		fontSize: 12,
	},
});

export default ImageUploadProgress;
