/**
 * Something that looks like a read-only Textfield but doesn't contain any behavior.
 */

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import '../base';
import styles from './Textfield.styl';
import Label from './Label';
import labelStyles from './Label.styl';
import passiveStyles from './PassiveTextfield.styl';

export default function PassiveTextfield({ type, label, error, success, warning, info, children, ...rest }) {
  const wrapperClasses = classNames({
    [styles.wrapper]: true,
    [styles.readonly]: true,
    [styles.fake]: true,
    [styles.error]: !!error,
    [styles.warning]: !!warning,
    [styles.info]: !!info,
    [styles.success]: !!success,
    [styles.labelOffset]: label
  });

  const inputLabelText = label;

  return (
    <div className={wrapperClasses}>
      <div className={`${styles.input} ${labelStyles.input} ${passiveStyles.textfield}`}>
        {children}
      </div>
      {!!inputLabelText && (
        <Label
          {...{ error, warning, info, success }}
        >
          {inputLabelText}
        </Label>
      )}
    </div>
  );
}

PassiveTextfield.propTypes = {
  label: PropTypes.string,
  error: PropTypes.string,
  warning: PropTypes.bool,
  info: PropTypes.bool,
  success: PropTypes.bool
};

PassiveTextfield.defaultProps = {
  label: undefined,
  error: undefined,
  warning: undefined,
  info: undefined,
  success: undefined
};