import React, { Dispatch, FC, SetStateAction, useState } from 'react'
import { FieldValues, UseFormRegister, UseFormSetValue } from 'react-hook-form';

interface PasswordInputProps {
    name: string;
    placeholder: string;
    autoComplete: string;
    setValue?: UseFormSetValue<FieldValues>;
    register: UseFormRegister<FieldValues | ChangePasswordFormType>;
    settings?: any
}

const PasswordInput: FC<PasswordInputProps> = ({
    name,
    placeholder,
    autoComplete,
    setValue,
    register,
    settings
}) => {
    const [showPassword, setshowPassword] = useState<boolean>(false);
    const togglePassword = () => {
        setshowPassword(!showPassword);
    }
    return (
        <div className="password-wrapper">
            <input
                type={showPassword ? 'text' : 'password'}
                placeholder={placeholder}
                autoComplete={autoComplete}
                onInput={(e) =>
                    setValue && setValue(name, e.currentTarget.value)
                }
                {...register(name, {
                    ...settings,
                })}
            />
            <span className="show-password cursor-pointer" onClick={togglePassword}>
                {
                    showPassword ? (
                        <i className="fas fa-eye-slash"></i>
                    ) : (
                        <i className="fas fa-eye"></i>
                    )
                }
            </span>
        </div>
    )
}

export default PasswordInput