import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "disabled", "connectedLeft", "connectedRight", "error", "helpText", "inverse", "onBlur", "onFocus", "prefix", "readOnly", "success", "suffix", "value", "warning", "width", "noInputStyling"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { forwardRef, useState } from 'react';
import cx from 'classnames';
import theme from './theme.css';
import Box, { omitBoxProps, pickBoxProps } from '../box';
import InputBase from './InputBase';
import ValidationText from '../validationText';
var SingleLineInputBase = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var _cx;

  var className = _ref.className,
      disabled = _ref.disabled,
      connectedLeft = _ref.connectedLeft,
      connectedRight = _ref.connectedRight,
      error = _ref.error,
      helpText = _ref.helpText,
      inverse = _ref.inverse,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      prefix = _ref.prefix,
      readOnly = _ref.readOnly,
      success = _ref.success,
      suffix = _ref.suffix,
      value = _ref.value,
      warning = _ref.warning,
      width = _ref.width,
      noInputStyling = _ref.noInputStyling,
      others = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      inputHasFocus = _useState2[0],
      setInputHasFocus = _useState2[1];

  var handleBlur = function handleBlur(event) {
    setInputHasFocus(false);
    onBlur && onBlur(event);
  };

  var handleFocus = function handleFocus(event) {
    setInputHasFocus(true);
    onFocus && onFocus(event);
  };

  var renderOneOrMultipleElements = function renderOneOrMultipleElements(prop) {
    if (Array.isArray(prop)) {
      return prop.map(function (element, index) {
        return /*#__PURE__*/React.cloneElement(element, {
          key: index
        });
      });
    }

    return prop;
  };

  var classNames = cx(theme['wrapper'], (_cx = {}, _defineProperty(_cx, theme['has-focus'], inputHasFocus), _defineProperty(_cx, theme['has-error'], error), _defineProperty(_cx, theme['has-success'], success), _defineProperty(_cx, theme['has-warning'], warning), _defineProperty(_cx, theme['has-connected-left'], connectedLeft), _defineProperty(_cx, theme['has-connected-right'], connectedRight), _defineProperty(_cx, theme['is-disabled'], disabled), _defineProperty(_cx, theme['is-inverse'], inverse), _defineProperty(_cx, theme['is-read-only'], readOnly), _cx), className);
  var boxProps = pickBoxProps(others);

  var inputProps = _objectSpread({
    ref: forwardedRef,
    disabled: disabled,
    inverse: inverse,
    onBlur: handleBlur,
    onFocus: handleFocus,
    readOnly: readOnly,
    value: value
  }, omitBoxProps(others));

  return /*#__PURE__*/React.createElement(Box, _extends({
    className: classNames
  }, boxProps), /*#__PURE__*/React.createElement("div", {
    className: cx(theme['input-wrapper'], noInputStyling && theme['is-input-disabled'])
  }, connectedLeft, /*#__PURE__*/React.createElement("div", {
    className: theme['input-inner-wrapper'],
    style: {
      width: width,
      flex: width && '0 1 auto'
    }
  }, prefix && /*#__PURE__*/React.createElement("div", {
    className: theme['prefix-wrapper']
  }, renderOneOrMultipleElements(prefix)), /*#__PURE__*/React.createElement(InputBase, inputProps), suffix && /*#__PURE__*/React.createElement("div", {
    className: theme['suffix-wrapper']
  }, renderOneOrMultipleElements(suffix))), connectedRight), /*#__PURE__*/React.createElement(ValidationText, {
    error: error,
    help: helpText,
    inverse: inverse,
    success: success,
    warning: warning
  }));
});
SingleLineInputBase.displayName = 'SingleLineInputBase';
export default SingleLineInputBase;