import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
//  strict
import * as React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import injectE2E from '../../Tools/injectE2E';
import { fontSize, prop, theme } from '../../Tools/interpolation';
import { Input, InputLabel } from './Input';
var Container =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-18ar0sn-0"
})(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], prop('width'));
var Wrapper =
/*#__PURE__*/
styled.textarea.attrs(injectE2E).withConfig({
  componentId: "sc-18ar0sn-1"
})(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  padding: 0.7rem 1rem;\n  box-sizing: border-box;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  border-width: 1px;\n  border-color: ", ";\n  border-style: solid;\n  border-radius: ", ";\n  background-color: ", ";\n  outline-width: 0;\n  user-select: text;\n  resize: none;\n  transition: box-shadow 0.25s ease-out;\n\n  &:disabled {\n    color: ", ";\n    border-color: ", ";\n    background: ", ";\n    cursor: not-allowed;\n  }\n\n  &:active:not(:disabled),\n  &:focus:not(:disabled) {\n    box-shadow: 0 0 0 1px\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n  }\n"], prop('width'), prop('height'), theme('fontPrimary'), fontSize('md'), theme('inputColor'), function (props) {
  return props.error != null ? theme('dangerColor')(props) : theme('inputBorderColor')(props);
}, theme('inputBorderRadius'), theme('inputBackgroundColor'), theme('inputColor'), theme('inputBorderColor'), theme('inputBackgroundColorDisabled'), function (props) {
  return props.error != null ? 'transparent' : theme('inputActiveColor');
}, theme('inputPlaceholderColor'), fontSize('sm'));

var TextArea = function TextArea(_ref) {
  var ref = _ref.forwardRef,
      input = _ref.input,
      rest = _objectWithoutProperties(_ref, ["forwardRef", "input"]);

  var hasLabel = rest.label != null;
  var hasError = rest.error != null;

  if (hasLabel || hasError) {
    return React.createElement(Container, {
      width: rest.width
    }, React.createElement(InputLabel, {
      disabled: rest.disabled,
      error: hasError,
      name: rest.name
    }, "".concat(rest.label || '').concat(hasLabel && hasError ? ' - ' : '').concat(rest.error || '')), React.createElement(Wrapper, _extends({}, input, rest, {
      ref: ref
    })));
  }

  return React.createElement(Wrapper, _extends({}, input, rest));
};

TextArea.propTypes = process.env.NODE_ENV !== "production" ? _objectSpread({}, Input.propTypes, {
  height: PropTypes.string
}) : {};
TextArea.defaultProps = {
  disabled: false,
  e2e: 'defaultTextArea',
  height: '100px',
  width: '100%'
};

var TextAreaWithRef = function TextAreaWithRef(props, ref) {
  return React.createElement(TextArea, _extends({}, props, {
    forwardRef: ref
  }));
};

export default React.forwardRef(TextAreaWithRef);