"use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _Label = _interopRequireDefault(require("../Label"));

var _reactOuiIcons = _interopRequireDefault(require("react-oui-icons"));

var _ButtonIcon = _interopRequireDefault(require("../ButtonIcon"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var Input = _react["default"].forwardRef(function (props, ref) {
  var defaultValue = props.defaultValue,
      displayError = props.displayError,
      focus = props.focus,
      hasClearButton = props.hasClearButton,
      hasSpellCheck = props.hasSpellCheck,
      id = props.id,
      isDisabled = props.isDisabled,
      isFilter = props.isFilter,
      isOptional = props.isOptional,
      isReadOnly = props.isReadOnly,
      isRequired = props.isRequired,
      label = props.label,
      leftIconName = props.leftIconName,
      max = props.max,
      maxLength = props.maxLength,
      min = props.min,
      note = props.note,
      onBlur = props.onBlur,
      onChange = props.onChange,
      onClearButtonClick = props.onClearButtonClick,
      onClick = props.onClick,
      onFocus = props.onFocus,
      onInput = props.onInput,
      onKeyDown = props.onKeyDown,
      placeholder = props.placeholder,
      rightIconName = props.rightIconName,
      step = props.step,
      testSection = props.testSection,
      textAlign = props.textAlign,
      type = props.type,
      value = props.value;
  var renderNote = (0, _react.useCallback)(function () {
    return _react["default"].createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + '-note'
    }, note);
  }, [note, testSection]);

  var renderIcon = function renderIcon(iconName) {
    return _react["default"].createElement(_reactOuiIcons["default"], {
      name: iconName,
      size: "medium"
    });
  };

  var renderClearButton = function renderClearButton() {
    return _react["default"].createElement(_ButtonIcon["default"], {
      title: "Clear Input",
      iconName: "close",
      size: "small",
      style: "plain",
      onClick: onClearButtonClick
    });
  };

  var renderInput = function renderInput() {
    var hasAlignStyle = false;

    if (textAlign) {
      hasAlignStyle = true;
    }

    var classes = (0, _classnames["default"])('oui-text-input', {
      'oui-text-input--read-only': isReadOnly
    }, {
      'oui-text-input--search': isFilter
    }, {
      'oui-form-bad-news': displayError
    }, _defineProperty({}, "text--".concat(textAlign), hasAlignStyle));

    var input = _react["default"].createElement("input", _extends({
      "data-oui-component": true,
      className: classes,
      id: id,
      ref: ref,
      type: type,
      value: value,
      defaultValue: defaultValue,
      placeholder: placeholder,
      required: isRequired,
      readOnly: isReadOnly,
      disabled: isDisabled,
      onInput: onInput,
      onChange: onChange,
      onClick: onClick,
      onBlur: onBlur,
      onKeyDown: onKeyDown,
      onFocus: onFocus,
      min: min,
      max: max,
      spellCheck: hasSpellCheck,
      step: step
    }, typeof maxLength === 'undefined' ? {} : {
      maxLength: maxLength
    }, {
      "data-test-section": testSection,
      autoFocus: focus
    }));

    if (leftIconName || rightIconName || hasClearButton) {
      var _classNames2;

      var containerClasses = (0, _classnames["default"])('position--relative', (_classNames2 = {}, _defineProperty(_classNames2, "oui-text-input-with-icon--left", leftIconName), _defineProperty(_classNames2, "oui-text-input-with-icon--right", rightIconName), _classNames2));
      return _react["default"].createElement("div", {
        className: containerClasses
      }, leftIconName && _react["default"].createElement("span", {
        className: "flex oui-input-icon__left"
      }, renderIcon(leftIconName)), input, rightIconName && !hasClearButton && _react["default"].createElement("span", {
        className: "flex oui-input-icon__right"
      }, renderIcon(rightIconName)), hasClearButton && _react["default"].createElement("span", {
        className: "flex oui-text-input__clear-button"
      }, renderClearButton()));
    }

    return input;
  };

  if (label) {
    return _react["default"].createElement("div", {
      "data-oui-component": true,
      className: (0, _classnames["default"])({
        'oui-form-bad-news': displayError
      })
    }, _react["default"].createElement(_Label["default"], {
      testSection: testSection && testSection + '-label',
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderInput(), note && renderNote());
  }

  return _react["default"].createElement(_react["default"].Fragment, null, renderInput(), note && renderNote());
});

Input.propTypes = {
  placeholder: _propTypes["default"].string,
  onKeyDown: _propTypes["default"].func,
  onInput: _propTypes["default"].func,
  onFocus: _propTypes["default"].func,
  onClick: _propTypes["default"].func,
  onClearButtonClick: _propTypes["default"].func,
  onChange: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  note: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].oneOf([null])]),
  min: _propTypes["default"].number,
  maxLength: _propTypes["default"].number,
  max: _propTypes["default"].number,
  leftIconName: _propTypes["default"].string,
  label: _propTypes["default"].string,
  isReadOnly: _propTypes["default"].bool,
  isFilter: _propTypes["default"].bool,
  isDisabled: _propTypes["default"].bool,
  id: _propTypes["default"].string,
  hasSpellCheck: _propTypes["default"].bool,
  hasClearButton: _propTypes["default"].bool,
  focus: _propTypes["default"].bool,
  displayError: _propTypes["default"].bool,
  defaultValue: _propTypes["default"].string,

  /** Adds an optional label if there is a label provided
   *  @param {Object} props Object of props
   *  @returns {Error} Error or null
   */
  isOptional: function verifyIsOptionalProp(props) {
    if (props.isOptional && !props.label) {
      return new Error('Must include a value for the label prop to use the isOptional prop');
    }

    return null;
  },

  /** Includes required asterisk label if true
   *  @param {Object} props Object of props
   *  @returns {Error} Error or null
   */
  isRequired: function verifyIsRequiredProp(props) {
    if (props.isRequired && !props.label) {
      return new Error('Must include a value for the label prop to use the isRequired prop');
    }

    return null;
  }
};
Input.displayName = 'Input';
Input.defaultProps = {
  note: null,
  isRequired: false,
  hasSpellCheck: true
};
var _default = Input;
exports["default"] = _default;