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

import InputFieldWithButton from './InputFieldWithButton';

import HiddenPassword from '../../visuals/Icon/svg/d_anonymous.svg';
import VisiblePassword from '../../visuals/Icon/svg/d_visible.svg';

class InputFieldForPassword extends Component {
  static propTypes = {
    semantic: PropTypes.string.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      showPassword: false,
    };
  }

  toggleShowPassword = () => {
    this.setState({ showPassword: !this.state.showPassword });
  };

  render() {
    const { showPassword } = this.state;

    return (
      <InputFieldWithButton
        type={showPassword ? 'text' : 'password'}
        icon={showPassword ? VisiblePassword : HiddenPassword}
        onButtonClick={this.toggleShowPassword}
        {...this.props}
      />
    );
  }
}

export default InputFieldForPassword;