import React from 'react';
import PropTypes from 'prop-types';
import ProtoTextarea from './ProtoTextarea';

const Textarea = props => {
  const _disabled = props.disabled === true ? 'br-gray-30' : '';

  // This enables all children of this component to share the state of this
  // component.
  const childrenWithProps = React.Children.map(props.children, child => {
    const propsToPass = {
      displayPass: props.displayPass,
      displayFailure: props.displayFailure,
      focussed: props.focussed,
      beenFocussed: props.beenFocussed,
      error: props.error,
    };
    return React.cloneElement(child, propsToPass);
  });

  const className = props.advanced
    ? `${props.valClassname} ${props.className}`
    : `br-gray-50 f-br-blue outline-blue ${props.className}`;

  return (
    <div className={'relative'}>
      <ProtoTextarea
        {...props}
        // prop-focussed={props.focussed.toString()}
        className={`p-3 b-2 b-solid flex ${_disabled} ${className}`}
        onChange={e => props.onChange(e.target.value)}
      />
      {props.displayFailure === true && props.advanced === true ? (
        <div className={'yellow text-600 h-6 mt-1 fs-3 abs'}>{props.error}</div>
      ) : (
        <div />
      )}
      {childrenWithProps}
    </div>
  );
};

Textarea.propTypes = {
  focussed: PropTypes.bool,
  beenFocussed: PropTypes.bool,
  hasSubmitted: PropTypes.bool,
  displayPass: PropTypes.bool,
  displayFailure: PropTypes.bool,
  advanced: PropTypes.bool,
  error: PropTypes.string,
  valClassname: PropTypes.string,
  size: PropTypes.oneOf(['s', 'm', 'l', 'xl']),
};

Textarea.defaultProps = {
  focussed: false,
  beenFocussed: false,
  hasSubmitted: false,
  displayPass: false,
  displayFailure: false,
  advanced: false,
  error: '',
  size: 'm',
  format: 'normal',
};

export default Textarea;