import React from 'react';
import PropTypes from 'prop-types';
import TextInput from 'foremanReact/components/common/forms/TextInput';

const ExtTextInput = ({
  hidden,
  editable,
  viewText,
  label,
  onChange,
  additionalData,
}) => {
  if (hidden) {
    return null;
  }

  if (!editable) {
    return (
      <div className="form-group">
        <label className="col-md-2 control-label">{label}</label>
        <div className="col-md-4">{viewText}</div>
      </div>
    );
  }

  return (
    <TextInput
      label={label}
      value={viewText}
      onChange={e => onChange(e.target.value, additionalData)}
    />
  );
};

ExtTextInput.propTypes = {
  hidden: PropTypes.bool.isRequired,
  editable: PropTypes.bool.isRequired,
  viewText: PropTypes.string,
  label: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  additionalData: PropTypes.object,
};
ExtTextInput.defaultProps = {
  viewText: '',
  additionalData: {},
};

export default ExtTextInput;