import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

import InputBase from './InputBase';
import Box, { omitBoxProps, pickBoxProps } from '../box';
import ValidationText from '../validationText';
import theme from './theme.css';

class Textarea extends PureComponent {
  render() {
    const { className, error, helpText, inverse, ...others } = this.props;

    const classNames = cx(theme['wrapper'], className);

    const boxProps = pickBoxProps(others);
    const inputProps = {
      error,
      inverse,
      ...omitBoxProps(others),
    };

    return (
      <Box className={classNames} {...boxProps}>
        <InputBase className={theme['textarea']} element="textarea" {...inputProps} />
        <ValidationText error={error} help={helpText} inverse={inverse} />
      </Box>
    );
  }
}

Textarea.propTypes = {
  /** Sets a class name for the wrapper to give custom styles. */
  className: PropTypes.string,
  /** The text to use as error message below the input. */
  error: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  /** The text to use as help text below the input. */
  helpText: PropTypes.string,
  /** Boolean indicating whether the input should render as inverse. */
  inverse: PropTypes.bool,
};

Textarea.defaultProps = {
  inverse: false,
};

export default Textarea;

@@ -382,16 +382,25 @@
 inverse,
+ warning,
  ...othe
@@ -445,16 +445,23 @@
 es = cx(
+%0A      
 theme%5B'w
@@ -469,16 +469,80 @@
 apper'%5D,
+%0A      %7B%0A        %5Btheme%5B'has-warning'%5D%5D: warning,%0A      %7D,%0A     
  classNa
@@ -543,16 +543,22 @@
 lassName
+,%0A    
 );%0A%0A    
@@ -908,16 +908,34 @@
 inverse%7D
+ warning=%7Bwarning%7D
  /%3E%0A    

implement 'warning' prop & apply warning styles