import React, {useState} from 'react';
import {Platform, TextInput, View} from 'react-native';
import PropTypes from 'prop-types';
import Icon from '../Icon';
import {Color} from '../../config/Color';


export default function Index(props) {
    const cardColor = Color.cardBackgroundColor;
    const {
        style,
        onChangeText,
        onFocus,
        placeholder,
        value,
        success,
        secureTextEntry,
        keyboardType,
        multiline,
        textAlignVertical,
        icon,
        onSubmitEditing,
    } = props;

    const [secure, setSecure] = useState(true);

    return (
        <View style={[{
            height: 46,
            borderRadius: 5,
            paddingHorizontal: 10,
            width: '100%',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
            backgroundColor: cardColor
        }, style]}>
            {React.Children.map(icon, child =>
                React.cloneElement(child, {
                    color: success ? Color.primaryColor : Color.accentColor,
                    style: {marginRight: Platform.OS === 'ios' ? 10 : 5}
                }),
            )}
            <TextInput
                style={{
                    fontFamily: 'Raleway',
                    flex: 1,
                    height: '100%',
                    color: Color.textColor,
                    paddingTop: 5,
                    paddingBottom: 5,
                }}
                onChangeText={text => onChangeText(text)}
                onFocus={() => onFocus()}
                autoCorrect={false}
                placeholder={placeholder}
                placeholderTextColor={success ? Color.grayColor : Color.primaryColor}
                secureTextEntry={secure}
                value={value}
                selectionColor={Color.primaryColor}
                keyboardType={keyboardType}
                multiline={multiline}
                textAlignVertical={textAlignVertical}
                onSubmitEditing={onSubmitEditing}
            />
            <Icon
                style={{paddingRight: 5}}
                name={!secure ? 'eye' : 'eye-slash'}
                size={20}
                color="gray"
                onPress={() => setSecure(!secure)}
            />
        </View>
    );
}

Index.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    onChangeText: PropTypes.func,
    onFocus: PropTypes.func,
    placeholder: PropTypes.string,
    value: PropTypes.string,
    success: PropTypes.bool,
    secureTextEntry: PropTypes.bool,
    keyboardType: PropTypes.string,
    multiline: PropTypes.bool,
    textAlignVertical: PropTypes.string,
    icon: PropTypes.node,
    onSubmitEditing: PropTypes.func,
};

Index.defaultProps = {
    style: {},
    onChangeText: text => {
    },
    onFocus: () => {
    },
    placeholder: 'Placeholder',
    value: '',
    success: true,
    secureTextEntry: false,
    keyboardType: 'default',
    multiline: false,
    textAlignVertical: 'center',
    icon: null,
    onSubmitEditing: () => {
    },
};