// @flow
import React from 'react';
import { View, TouchableOpacity, TouchableHighlight, Image } from 'react-native';
import { Icon } from 'react-native-material-ui';
import uiTheme from '../ui-theme';

const { imagePreview: theme } = uiTheme;

const backdropStyle = {
	position: 'absolute',
	top: 0,
	bottom: 0,
	left: 0,
	right: 0,
	backgroundColor: theme.backdropColor,
	flexDirection: 'column',
	justifyContent: 'center',
};

const imageStyle = {
	flex: 2,
	resizeMode: 'contain',
};

const DeleteButton = ({ onPress, style }: { onPress: Function, style?: { [string]: string | number } }) => {
	return (
		<TouchableHighlight
			onPress={onPress}
			style={{
				height: null,
				width: 50,
				padding: 12,
				borderWidth: 1,
				borderColor: theme.deleteBtnBorderColor,
				borderRadius: 25,
				backgroundColor: theme.deleteBtnBackgroundColor,
				...style,
			}}
			underlayColor="red"
		>
			<View>
				<Icon name="delete" color={theme.deleteBtnIconColor} size={26} />
			</View>
		</TouchableHighlight>
	);
};

const CloseButton = ({ onPress, style }: { onPress: Function, style?: Object }) => {
	return (
		<TouchableOpacity style={{ padding: 10, ...style }} onPress={onPress}>
			<Icon name="close" color={theme.closeBtnIconColor} size={30} />
		</TouchableOpacity>
	);
};

type Props = {
	onClose: () => void,
	onDelete: () => void,
	imageSrc: string,
};

const ImagePreviewModal = ({ onClose, onDelete, imageSrc }: Props) => {
	return (
		<View style={backdropStyle}>
			<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
				<CloseButton onPress={onClose} />
			</View>
			<Image style={imageStyle} source={{ uri: imageSrc }} />
			<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
				<DeleteButton onPress={onDelete} />
			</View>
		</View>
	);
};
ImagePreviewModal.displayName = 'ImagePreviewModal';

export default ImagePreviewModal;