"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Input = exports.InputLabel = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _injectE2E = _interopRequireDefault(require("../../Tools/injectE2E"));

var _interpolation = require("../../Tools/interpolation");

var _Checkbox = _interopRequireDefault(require("./Checkbox"));

var _Radio = _interopRequireDefault(require("./Radio"));

//  strict
var Container =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "sc-1c3roxu-0"
})(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  position: relative;\n"], (0, _interpolation.prop)('width'));

var InputWrapper =
/*#__PURE__*/
_styledComponents.default.input.attrs(_injectE2E.default).withConfig({
  componentId: "sc-1c3roxu-1"
})(["\n  display: block;\n  height: 2.7rem;\n  width: ", ";\n  padding: 0 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  background-image: none;\n  outline-width: 0;\n  user-select: text;\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"], (0, _interpolation.prop)('width'), (0, _interpolation.theme)('fontPrimary'), (0, _interpolation.fontSize)('md'), (0, _interpolation.theme)('inputColor'), function (props) {
  return props.error != null ? (0, _interpolation.theme)('dangerColor')(props) : (0, _interpolation.theme)('inputBorderColor')(props);
}, (0, _interpolation.theme)('inputBorderRadius'), (0, _interpolation.theme)('inputBackgroundColor'), (0, _interpolation.theme)('inputColor'), (0, _interpolation.theme)('inputBorderColor'), (0, _interpolation.theme)('inputBackgroundColorDisabled'), function (props) {
  return props.error != null ? 'transparent' : (0, _interpolation.theme)('inputActiveColor');
}, (0, _interpolation.theme)('inputPlaceholderColor'), (0, _interpolation.fontSize)('sm'));

var InputLabel =
/*#__PURE__*/
_styledComponents.default.label.withConfig({
  componentId: "sc-1c3roxu-2"
})(["\n  font-family: ", ";\n  font-size: ", ";\n  padding-bottom: 0.5rem;\n  color: ", ";\n  ", ";\n"], (0, _interpolation.theme)('fontPrimary'), (0, _interpolation.fontSize)('sm'), function (props) {
  return props.error === true && props.disabled !== true ? props.theme.dangerColor : props.theme.inputLabelColor;
}, function (props) {
  return props.disabled === true ? 'cursor: not-allowed' : '';
});

exports.InputLabel = InputLabel;

var Input = function Input(_ref) {
  var _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      ref = _ref.forwardRef,
      input = _ref.input,
      type = _ref.type,
      renderSuffix = _ref.renderSuffix,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "forwardRef", "input", "type", "renderSuffix"]);
  var hasLabel = rest.label != null;
  var hasError = rest.error != null;

  if (type === 'checkbox') {
    return React.createElement(_Checkbox.default, (0, _extends2.default)({
      className: className,
      input: input,
      type: "checkbox"
    }, rest));
  }

  if (type === 'radio') {
    return React.createElement(_Radio.default, (0, _extends2.default)({
      className: className,
      input: input,
      type: "radio"
    }, rest));
  }

  if (hasLabel || hasError) {
    return React.createElement(Container, {
      className: className,
      width: rest.width
    }, React.createElement(InputLabel, {
      disabled: rest.disabled,
      error: hasError,
      htmlFor: rest.name
    }, "".concat(rest.label || '').concat(hasLabel && hasError ? ' - ' : '').concat(rest.error || '')), React.createElement(InputWrapper, (0, _extends2.default)({}, input, rest, {
      ref: ref,
      type: type
    })), renderSuffix && renderSuffix(rest.disabled));
  }

  return React.createElement(Container, {
    className: className,
    width: rest.width
  }, React.createElement(InputWrapper, (0, _extends2.default)({}, input, rest, {
    ref: ref,
    type: type
  })), renderSuffix && renderSuffix(rest.disabled));
};

exports.Input = Input;
Input.propTypes = process.env.NODE_ENV !== "production" ? {
  className: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  e2e: _propTypes.default.string,
  error: _propTypes.default.string,
  input: _propTypes.default.object,
  label: _propTypes.default.string,
  name: _propTypes.default.string,
  renderSuffix: _propTypes.default.func,
  type: _propTypes.default.oneOf(['checkbox', 'date', 'number', 'password', 'radio', 'search', 'text']),
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  width: _propTypes.default.string
} : {};
Input.defaultProps = {
  disabled: false,
  e2e: 'defaultInput',
  type: 'text',
  width: '100%'
};

var InputWithRef = function InputWithRef(props, ref) {
  return React.createElement(Input, (0, _extends2.default)({}, props, {
    forwardRef: ref
  }));
};

var _default = React.forwardRef(InputWithRef);

exports.default = _default;