import React, { useState } from "react";
import FormInput, { FormInputProps } from "./FormInput";

export default React.forwardRef<any, FormInputProps>(
  (
    { onBlur, onChangeText, value, label, ...props },
    ref
  ): React.ReactElement => {
    const [showPassword, setShowPassword] = useState(false);

    const toggleShowPassword = () => {
      setShowPassword(!showPassword);
    };

    return (
      <FormInput
        label={label}
        beforeIcon="lock"
        afterIcon={showPassword ? "eye" : "eyeo"}
        placeholder="⋆⋆⋆⋆⋆⋆⋆⋆⋆⋆"
        onBlur={onBlur}
        onChangeText={onChangeText}
        value={value}
        onPress={toggleShowPassword}
        secureTextEntry={!showPassword}
        {...ref}
        {...props}
      />
    );
  }
);