import React, { Component } from 'react';
import {
	StyleSheet,
	View,
	TextInput as ReactTextInput,
} from 'react-native';
import { NixplayIcon, color } from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import { fontMaker } from '~/styles/fonts';
import { fontSizes } from '~/styles/variables';
import { Text } from './text';


const styles = StyleSheet.create({
	container: {
		marginBottom: 10,
	},
	inputContainer: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	input: {
		flex: 1,
		padding: 15,
		paddingTop: 10,
		paddingBottom: 10,
		borderWidth: 1,
		borderColor: color.borderMistBlue,
		borderRadius: 4,
		backgroundColor: color.white,
		color: color.mistBlue05,
	},
	inputError: {
		paddingLeft: 15,
		paddingRight: 15,
	},
	secureTextToggle: {
		position: 'absolute',
		right: 10,
		color: color.mistBlue04,
	},
});

class TextInput extends Component {
	static propTypes = {
		fontWeight: PropTypes.string,
		fontStyle: PropTypes.string,
		size: PropTypes.string,
		style: PropTypes.any,
		hideError: PropTypes.bool,
		secureTextEntry: PropTypes.bool,
		searchBoxEntry: PropTypes.bool,
		meta: PropTypes.object,
		defaultText: PropTypes.string,
	}

	static defaultProps = {
		fontWeight: 'Normal',
		fontStyle: 'normal',
		size: 'base',
		style: {},
		hideError: false,
		secureTextEntry: false,
		searchBoxEntry: false,
		meta: {},
		defaultText: ''
	}

	constructor(props) {
		super(props);
		this.state = {
			secureText: this.props.secureTextEntry,
		};
		this.toggleSecureText = this.toggleSecureText.bind(this);
	}

	toggleSecureText() {
		this.setState({ secureText: !this.state.secureText });
	}

	render() {
		const {
			fontWeight, fontStyle, size, style, meta, defaultText,
			...other
		} = this.props;
		const fontProp = {
			weight: fontWeight,
			style: fontStyle,
		};
		const font = StyleSheet.create({
			font: fontMaker(fontProp),
		});
		// const formStates = ['active', 'autofilled', 'asyncValidating', 'dirty', 'invalid',
		// 	'pristine', 'submitting', 'touched', 'valid', 'visited', 'error'];
		return (
			<View style={styles.container}>
				<View style={styles.inputContainer}>
					<ReactTextInput
						{...other}
						underlineColorAndroid="transparent"
						secureTextEntry={this.state.secureText}
						value={defaultText}
						style={[styles.input, {
							fontSize: fontSizes[size],
						}, !this.state.secureText && font.font, style,
						this.props.secureTextEntry && { paddingRight: 40 }]} // can not apply style to security styp text input https://github.com/facebook/react-native/issues/18815
					/>
					{this.props.secureTextEntry &&
						<NixplayIcon
							style={styles.secureTextToggle}
							name={this.state.secureText ? 'eye' : 'eye-slash'}
							testID={this.state.secureText ? 'Eye' : 'EyeSlash'}
							onPress={this.toggleSecureText}
						/>
					}
					{this.props.searchBoxEntry &&
						<NixplayIcon
							style={styles.secureTextToggle}
							name="search"
							testID="Search"
						/>
					}
				</View>
				<Text
					color="red"
					fontSize={fontSizes.smaller(size, 1)}
					style={[styles.inputError,
						(!meta.touched || (meta.touched && !meta.error)) && { height: 0 },
						this.props.hideError && { display: 'none' },
					]}
				>
					{meta.error}
				</Text>
				{/* {
					formStates.filter((state) => meta[state]).map((state) => (
						<Text key={state}> - {state}</Text>
					))
				} */}
			</View>
		);
	}
}

export { TextInput };
