import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class PasswordInput extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    showPasswordGenerateWallet: PropTypes.func,
    showPassword: PropTypes.bool,
    input: PropTypes.object,
    meta: PropTypes.object
  };

  render() {
    return (
      <div>
        <div>
          <div className="input-group" style={{ width: '100%' }}>
            <input
              {...this.props.input}
              name="password"
              className={
                this.props.meta.error
                  ? 'form-control is-invalid'
                  : 'form-control'
              }
              type={this.props.showPassword ? 'text' : 'password'}
              placeholder="Do NOT forget to save this!"
              aria-label="Enter a strong password (at least 9 characters)"
            />
            <span
              onClick={this.props.showPasswordGenerateWallet}
              aria-label="make password visible"
              role="button"
              className="input-group-addon eye"
            />
          </div>
        </div>
      </div>
    );
  }
}