// hooks
import {useState, useEffect} from 'react';
import styles from './styles.module.scss';
import SvgIcon from "@components/SvgIcon";

const PasswordInput = ({innerRef, ...props}) => {
    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
    const wrapClassName=props.className;
    const message=props.message?props.message:"";
    props.className=props.inputClass?props.inputClass:"";

    const togglePasswordVisibility = e => {
        e.preventDefault();
        setIsPasswordVisible(!isPasswordVisible);
    }

    useEffect(() => {
        props.value === '' && setIsPasswordVisible(false);
    }, [props.value]);

    return (
        <div className={`d-flex flex-column g-6`}>
            <div className={`input-control ${wrapClassName}`}>
                <input
                    type={isPasswordVisible ? 'text' : 'password'}
                    autoComplete="off"
                    ref={innerRef}
                    {...props}/>
                <button className={styles.eye_btn} onClick={togglePasswordVisibility} aria-label="Toggle password visibility">
                    <SvgIcon className={styles.icon} herf={`${isPasswordVisible?'icon_Hide':'icon_View'}`}></SvgIcon>
                </button>
            </div>
            {
                message!==""?(<div className="input-prompt-error">{message}</div>):(<></>)
            }
        </div>
    )
}

export default PasswordInput
