import React, { useRef, FC, useState } from 'react';
import Input, { InputProps } from '../../blocks/Input';
import HidePasswordSVG from '../../assets/icons/icon-hide.svg';
import ShowPasswordSVG from '../../assets/icons/icon-show.svg';
import css from './index.module.css';

export interface InputPasswordProps {
  InputProps: InputProps;
}

const InputPassword: FC<InputPasswordProps> = ({ InputProps }) => {
  const inputElement = useRef(null);
  const [showPassword, setShowPassword] = useState(false);

  const handlePassword = (): void => {
    if (inputElement.current.type === 'password') {
      setShowPassword(true);
      inputElement.current.type = 'text';
    } else {
      setShowPassword(false);
      inputElement.current.type = 'password';
    }
  };

  return (
    <div className={css.inputPassword}>
      <Input {...InputProps} inputRef={inputElement} type="password">
        <button
          className={css.inputPassword__button}
          onClick={(e): void => {
            e.preventDefault();
            handlePassword();
          }}
          type="button"
        >
          {showPassword ? <HidePasswordSVG /> : <ShowPasswordSVG />}
        </button>
      </Input>
    </div>
  );
};

export default InputPassword;