import React from 'react';
import { View } from 'react-native';
import { FormInput, CheckBox } from 'react-native-elements';

import { strings } from '../../locales/i18n';

import colors from '../../config/colors.json'

const PasswordField = ({ value, onChangeText, inputStyle, visible = false, onEyePress }) => {
  return (
    <View>
      {/* PASSWORD INPUT */}
      <FormInput
        secureTextEntry={!visible}
        value={value}
        onChangeText={onChangeText}
        placeholder={strings('userCreateFlow.signUp.minPassword')}
        autoCorrect={false}
        autoCapitalize='none'
        inputStyle={inputStyle}
      />
      
      {/* PASSWORD EYE */}
      <CheckBox
        iconRight
        iconType='material-community'
        checkedIcon='eye-off'
        uncheckedIcon='eye'
        onIconPress={onEyePress}
        onPress={onEyePress}
        uncheckedColor={colors.grey}
        checkedColor={colors.grey}
        checked={visible}
        size={25}
        containerStyle={styles.passwordEye}
      />
    </View>
  );
};

const styles = {
  passwordEye: {
    position: 'absolute',
    top: 5,
    right: 25,
    backgroundColor: colors.transparent,
    borderWidth: 0, 
    margin: 0, 
    padding: 0, 
    marginRight: 0 
  }
}


export default PasswordField;