import React from 'react';
import {
	StyleSheet,
	View,
	Image,
	Keyboard,
} from 'react-native';
import i18n from '~/locale/i18n';
import { config } from '~/config';
import { color, Text } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import { TextInput2 } from '~comp/reduxForm';


const styles = StyleSheet.create({
	container: {
		flex: 1,
		minHeight: 350,
		backgroundColor: 'transparent',
		marginHorizontal: 12,
		marginBottom: 12,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'center',
	},
	preview: {
		flex: 1,
		width: '100%',
		height: 300,
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: 'black',
	},
	caption: {
		width: '100%',
		minHeight: 50,
		marginVertical: 8,
		borderColor: color.grey02,
	},
});


export const SharePreviewItem = (props) => {
	const {
		data,
		index,
		event,
	} = props;
	const { uri } = data;
	return (
		<View style={styles.container}>
			<Image
				source={{ uri }}
				style={[styles.preview]}
				androidScaleType="contain"
				resizeMethod="resize"
				resizeMode="contain"
			/>
			<View style={{
				width: '100%',
				minHeight: 50,
				alignItems: 'center',
				justifyContent: 'space-around',
			}}
			>
				{
					data.fileSize > config.fileSizeLimit
						? <Text style={styles.caption} color="red" textStyle="caption">{i18n.t('contents.selectionErrorFileTooLarge')}</Text>
						: <TextInput2
							name={`caption${index}`}
							testID={`Caption${index}`}
							placeholder=""
							autoCapitalize="none"
							autoCorrect={false}
							hideError
							maxLength={160}
							selectionColor={color.mistBlue04}
							multiline
							returnKeyType="done"
							blurOnSubmit
							onSubmitEditing={Keyboard.dismiss}
							style={styles.caption}
							onChange={text => { event(index, text); }}
						/>
				}
			</View>
		</View>
	);
};

SharePreviewItem.propTypes = {
	data: PropTypes.object.isRequired,
	index: PropTypes.number.isRequired,
	event: PropTypes.func.isRequired,
};
