import React, {useState, useEffect} from 'react';
import {View, TextInput, Text, StyleSheet} from 'react-native';

const TextInputComponent = (props) => {
    // 데이터
    const {onChangeText, value, secureTextEntry, placeholder, rules, inputError, style1, style2} = props;
    const [error, setError] = useState(null);

    // 렌더링
    useEffect(() => {
        if (rules) {
            let i = 0;
            while (true) {
                if (rules[i](value) !== true) {
                    setError(rules[i](value));
                    break;
                } else {
                    if (i === rules.length - 1) {
                        setError(null);
                        break;
                    } else {
                        i++;
                    }
                }
            }
        }
    }, [value]);
    return (
        <>
            <View style={{...styles.input, ...style1}}>
                <TextInput style={{...styles.inputText}}
                           onChangeText={onChangeText}
                           value={value}
                           secureTextEntry={secureTextEntry}
                           placeholder={placeholder}/>
            </View>
            <Text style={{...styles.inputError, ...style2}}>{inputError ? inputError : error}</Text>
        </>
    )
};

const styles = StyleSheet.create({
    input: {
        borderRadius: 3,
        backgroundColor: '#ebebeb',
    },
    inputText: {
        fontSize: 16,
        color: '#373737',
    },
    inputError: {
        marginBottom: 5,
        fontSize: 14,
        color: '#9b0500',
    }
});

export default TextInputComponent;