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

import IconButton from '../Button/IconButton';
import isTouch from '../../utils/isTouch';

class InputFieldWithButton extends Component {
  static propTypes = {
    icon: PropTypes.any.isRequired,
    semantic: PropTypes.string.isRequired,
    onButtonClick: PropTypes.func,
  };

  static defaultProps = {
    onButtonClick: () => {},
  };

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

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

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

  eventType = isTouch() ? 'onTouchStart' : 'onClick';

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

    const className = classnames('Input-fieldWithButton', {
      'Input-fieldWithButton--showButton': isFocused,
    });

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

    return (
      <div className={className}>
        <div className={containerClassName}>
          <input {...props} onBlur={this.onBlur} onFocus={this.onFocus} />
          <IconButton
            icon={icon}
            semantic={semantic}
            variant="linkBlue"
            inputButtonClass="inputButton"
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            {...{ [this.eventType]: onButtonClick }}
          />
        </div>
      </div>
    );
  }
}

export default InputFieldWithButton;