import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputLabel from './InputLabel';
import Input from './Input';
import InputField from './InputField';
import InputFeedback from './InputFeedback';

class InputForm extends Component {
  static propTypes = {
    valid: PropTypes.bool,
    variant: PropTypes.oneOf(['dark', 'light']),
    label: PropTypes.string,
    errorMessage: PropTypes.string,
    note: PropTypes.any,
    className: PropTypes.string,
    tooltip: PropTypes.any,
  };
  static defaultProps = {
    label: null,
    errorMessage: null,
    note: null,
    variant: 'dark',
    valid: true,
    className: null,
    tooltip: null,
  };

  getInputWithLabel() {
    // eslint-disable-next-line no-unused-vars, react/prop-types
    const { label, errorMessage, note, valid, variant, className, tooltip, ...props } = this.props;
    if (label) {
      return (
        <InputLabel>
          <span className="Input-labelText">{label}</span>
          <span className="Input-wrapper">
            <InputField {...props} />
            {tooltip}
          </span>
          {errorMessage && <InputFeedback type="error">{errorMessage} </InputFeedback>}
        </InputLabel>
      );
    }
    return <InputField {...props} />;
  }

  render() {
    const { label, errorMessage, note, valid, variant, className, tooltip, ...props } = this.props;
    return (
      <Input variant={variant} valid={valid} className={className}>
        {label ? (
          this.getInputWithLabel()
        ) : (
          <span className="Input-wrapper">
            <InputField {...props} />
            {tooltip}
          </span>
        )}
        {!label && errorMessage && <InputFeedback type="error">{errorMessage} </InputFeedback>}
        {note && <InputFeedback>{note}</InputFeedback>}
      </Input>
    );
  }
}

export default InputForm;