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

import Icon from '../../visuals/Icon/Icon';

class InputWithIcon extends Component {
  static propTypes = {
    icon: PropTypes.any.isRequired,
    semantic: PropTypes.string,
  };
  static defaultProps = {
    semantic: null,
  };

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

  onFocus = () => {
    this.setState({ isFocused: true });
  };

  onBlur = () => {
    this.setState({ isFocused: false });
  };

  render() {
    const { isFocused } = this.state;
    const { icon, semantic, ...props } = this.props;

    const containerClassName = classnames('Input-field', {
      'Input--focused': isFocused,
    });

    return (
      <div className="Input-fieldWithIcon">
        <div className={containerClassName}>
          <input {...props} onBlur={this.onBlur} onFocus={this.onFocus} />
          <Icon icon={icon} semantic={semantic} />
        </div>
      </div>
    );
  }
}

export default InputWithIcon;