import React from 'react';

const InputItem = ({ spec, input, meta: { touched, error } }) => {

  const successIconRight = {
    color: '#2ecc71'
  };

  const errorIconRight = {
    color: '#e74c3c'
  };

  const { label, type, placeholder, iconLeft, iconRight } = spec;

  const renderIcon = () => {
    console.log(touched, error);

    if (touched && error != undefined) {
      return <i className={iconRight} style={errorIconRight} />
    } else if (touched && (error === undefined)) {
      return <i className={iconRight} style={successIconRight} />
    }

  }

  return (
    <div className="field">
      {label && <label className="label">{label}</label>}
      <p className="control has-icons-left has-icons-right">
        <input
          {...input}
          className="input"
          type={type}
          placeholder={placeholder}
        />
        <span className="icon is-small is-left">
          <i className={iconLeft} />
        </span>
        <span className="icon is-small is-right">
          {(touched && error && <i className={iconRight} style={errorIconRight} />) || (touched && <i className={iconRight} style={successIconRight} />) }
          {/* { renderIcon() } */}
        </span>
      </p>
    </div>
  );
};

export default InputItem;