import React, { Component } from 'react';
import { View, Image as RNImage } from 'react-native';
import PropTypes from 'prop-types';
import imgAddIcon from '~/images/photos/404.png';
import FastImage from 'react-native-fast-image';

export class CoverImage extends Component {
	static propTypes = {
		source: PropTypes.object.isRequired,
		style: PropTypes.any.isRequired,
		transform: PropTypes.any.isRequired,
		resizeMode: PropTypes.string.isRequired,
	}

	constructor(props) {
		super(props);
		this.state = {
			source: props.source,
			style: props.style,
			transform: props.transform,
			resizeMode: props.resizeMode,
			error: false,
		};
		this.onError = this.onError.bind(this);
	}

	onError() {
		this.setState({
			error: false,
		});
	}

	render() {
		return this.state.error ?
			(
				<View style={{
					flex: 1,
					alignContent: 'center',
					alignItems: 'center',
					justifyContent: 'center',
				}}
				>
					<RNImage
						source={imgAddIcon}
						resizeMode={this.state.resizeMode}
						style={{ height: 25, width: 25 }}
					/>
				</View>
			) : (
				<FastImage
					source={this.state.source}
					style={this.state.style}
					transform={this.state.transform}
					resizeMode={this.state.resizeMode}
					onError={this.onError}
				/>);
	}
}
