import _pt from "prop-types";

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; }

import React, { useCallback } from 'react';
import classNames from 'classnames';
import Label from '../Label';
import Icon from 'react-oui-icons';
import ButtonIcon from '../ButtonIcon';
var Input = React.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 = useCallback(function () {
    return React.createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + '-note'
    }, note);
  }, [note, testSection]);

  var renderIcon = function renderIcon(iconName) {
    return React.createElement(Icon, {
      name: iconName,
      size: "medium"
    });
  };

  var renderClearButton = function renderClearButton() {
    return React.createElement(ButtonIcon, {
      title: "Clear Input",
      iconName: "close",
      size: "small",
      style: "plain",
      onClick: onClearButtonClick
    });
  };

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

    if (textAlign) {
      hasAlignStyle = true;
    }

    var classes = classNames('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.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 = classNames('position--relative', (_classNames2 = {}, _defineProperty(_classNames2, "oui-text-input-with-icon--left", leftIconName), _defineProperty(_classNames2, "oui-text-input-with-icon--right", rightIconName), _classNames2));
      return React.createElement("div", {
        className: containerClasses
      }, leftIconName && React.createElement("span", {
        className: "flex oui-input-icon__left"
      }, renderIcon(leftIconName)), input, rightIconName && !hasClearButton && React.createElement("span", {
        className: "flex oui-input-icon__right"
      }, renderIcon(rightIconName)), hasClearButton && React.createElement("span", {
        className: "flex oui-text-input__clear-button"
      }, renderClearButton()));
    }

    return input;
  };

  if (label) {
    return React.createElement("div", {
      "data-oui-component": true,
      className: classNames({
        'oui-form-bad-news': displayError
      })
    }, React.createElement(Label, {
      testSection: testSection && testSection + '-label',
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderInput(), note && renderNote());
  }

  return React.createElement(React.Fragment, null, renderInput(), note && renderNote());
});
Input.propTypes = {
  placeholder: _pt.string,
  onKeyDown: _pt.func,
  onInput: _pt.func,
  onFocus: _pt.func,
  onClick: _pt.func,
  onClearButtonClick: _pt.func,
  onChange: _pt.func,
  onBlur: _pt.func,
  note: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
  min: _pt.number,
  maxLength: _pt.number,
  max: _pt.number,
  leftIconName: _pt.string,
  label: _pt.string,
  isReadOnly: _pt.bool,
  isFilter: _pt.bool,
  isDisabled: _pt.bool,
  id: _pt.string,
  hasSpellCheck: _pt.bool,
  hasClearButton: _pt.bool,
  focus: _pt.bool,
  displayError: _pt.bool,
  defaultValue: _pt.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
};
export default Input;