import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Text, TextInput, View } from 'react-native';

import styles from '../Profile.styles.js';

const STRINGS = {
    HINT: `Password must be at least 8 characters and contain a minimum of one lowercase and one uppercase letter, a number, and a symbol. Spaces are allowed. Be memorable and secure!`,
    MATCH: `That's a match!`,
    NO_MATCH: `Well that's not a match...`,
    PLACEHOLDER_PASSWORD: 'password',
    PLACEHOLDER_VERIFY: 're-enter password',
};

export default function PasswordInput({ handleValidPasswordEntry }) {
    const [password, setPassword] = useState(null);
    const [doPasswordsMatch, setPasswordMatch] = useState(null);

    const _doesVerificationPasswordMatch = (text) => {
        if (!password || password.length < text.length) {
            setPasswordMatch(null);
            return;
        }

        const result = password === text;
        handleValidPasswordEntry(result && password);
        setPasswordMatch(result);
    };

    return (
        <View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
            <Text style={styles.hintText}>{STRINGS.HINT}</Text>
            <TextInput
                onChangeText={setPassword}
                placeholder={STRINGS.PLACEHOLDER_PASSWORD}
                secureTextEntry
                style={[styles.textInput, styles.requiredInput]}
            />
            <TextInput
                onChangeText={_doesVerificationPasswordMatch}
                placeholder={STRINGS.PLACEHOLDER_VERIFY}
                secureTextEntry
                style={[styles.textInput, styles.requiredInput]}
            />
            {doPasswordsMatch === true && <Text style={{ color: 'green' }}>{STRINGS.MATCH}</Text>}
            {doPasswordsMatch === false && <Text style={{ color: 'red' }}>{STRINGS.NO_MATCH}</Text>}
        </View>
    );
}

PasswordInput.propTypes = {
    handleValidPasswordEntry: PropTypes.func.isRequired,
};