import React from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity } from 'react-native';
import Palette from '~/styles/palette';
import MainText from '../Text/MainText';
import ErrorText from '../Text/ErrorText';
import FastImage from '~/components/UI/FastImageWrapper';
import { createTestingProps } from '~/locators/utils';

const
	TITLE_MARGIN_BOTTOM = 8,
	INPUT_FONT_SIZE = 17;

const BorderedInput = ({ isNotRequired, title, inputStyle, value, onChangeText, isSecure, hasIcon, onPress, iconImg, isPasswordInvalid, onBlur, testIDProps = {}, ...props }) => (
	<View style={styles.container}>
		<MainText {...createTestingProps(testIDProps.label)} style={title && styles.title}>
			{title} {isNotRequired && <MainText style={{ color: Palette.warmGrey }}>{' (' + isNotRequired + ')'}</MainText>}
		</MainText>
		<View style={{ flexDirection: 'row', alignItems: 'center' }}>
			<TextInput
				style={[styles.input, inputStyle, hasIcon && { paddingRight: 44 }]}
				value={value}
				onChangeText={onChangeText}
				underlineColorAndroid='transparent'
				autoCapitalize={'none'}
				autoCorrect={false}
				secureTextEntry={isSecure}
				onBlur={onBlur}
				{...createTestingProps(testIDProps.input)}
				{...props}
			/>
			{hasIcon &&
				<TouchableOpacity {...createTestingProps(testIDProps.icon)} hitSlop={{ top:16,left:16,bottom:16,right:16 }} onPress={onPress} style={styles.iconContainer}>
					<FastImage style={styles.icon} source={{ uri: iconImg }} />
				</TouchableOpacity>
			}
		</View>
		{typeof isPasswordInvalid !== 'undefined' && isPasswordInvalid && <ErrorText />}
	</View>
);

export default BorderedInput;

const styles = StyleSheet.create({
	container: {
		alignSelf: 'stretch',
	},
	title: {
		marginBottom: TITLE_MARGIN_BOTTOM,
		fontWeight: 'bold',
		color: Palette.black,
	},
	input: {
		flex: 1,
		paddingVertical: 10,
		paddingHorizontal: 16,
		fontSize: INPUT_FONT_SIZE,
		color: Palette.black,
		borderWidth: 1,
		borderRadius: 9,
		borderColor: Palette.borderColor,
		textAlignVertical: 'center',
	},
	iconContainer: {
		width: 28,
		height: 28,
		position: 'absolute',
		right: 0,
		marginRight: 8,
		backgroundColor: Palette.white,
		justifyContent: 'center',
		alignItems: 'center',
	},
	icon: {
		width: 24,
		height: 24,
	},
});