function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }

import React from 'react';
import defaultStyle from './TextBox.module.css';
import textBoxConstants from './TextBox.constantProps';
import getCompliedCustomId from '../../utils/getCompliedCustomId';
import textBoxPropTypes, { defaultProps, propsDescription } from './TextBox.propTypes';
import PropTypes from 'prop-types';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import textBoxCssJSLogic from './TextBox.cssJSLogic';
export default function TextBox(props) {
  let {
    placeholder,
    name,
    value,
    id,
    maxlength,
    minlength,
    min,
    max,
    step,
    pattern,
    required,
    autocomplete,
    type,
    disabled,
    readonly,
    startIcon,
    endIcon,
    onClick,
    onFocus,
    onBlur,
    onChange,
    onKeyPress,
    onKeyUp,
    onKeyDown,
    onMouseUp,
    onMouseDown,
    role,
    tabIndex,
    ariaLabel,
    ariaLabelledby,
    ariaPlaceholder,
    ariaRequired,
    ariaReadonly,
    ariaDisabled,
    focusClass,
    autoFocus,
    getRef,
    customStyle,
    customId,
    tagAttributes,
    tagGeneralAttributes
  } = props;
  let style = useMergeStyle(defaultStyle, customStyle);
  let hasIcon = startIcon || endIcon;
  let className = textBoxCssJSLogic(props, style);
  let textBoxFunctionalProperties = {
    maxLength: maxlength,
    minLength: minlength,
    min: min,
    max: max,
    step: step,
    pattern: pattern,
    required: required,
    autoFocus: autoFocus,
    autoComplete: autocomplete
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RenderAsIcon, {
    icon: startIcon,
    className: style.start_icon
  }), /*#__PURE__*/React.createElement("input", _extends({}, tagGeneralAttributes, {
    type: type,
    name: name,
    value: value,
    id: id,
    placeholder: placeholder,
    onClick: onClick,
    onFocus: onFocus,
    onBlur: onBlur // onChange={(e) => {
    //   let val = e.target.value;
    //   onChange && onChange(val, e);
    // }}
    ,
    onChange: onChange,
    onKeyPress: onKeyPress,
    onKeyUp: onKeyUp,
    onKeyDown: onKeyDown,
    onMouseUp: onMouseUp,
    onMouseDown: onMouseDown,
    className: className,
    ref: getRef,
    disabled: disabled,
    readOnly: readonly,
    "data-id": getCompliedCustomId(props, customId.textbox),
    role: role,
    tabIndex: tabIndex,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    "aria-placeholder": ariaPlaceholder,
    "aria-required": ariaRequired,
    "aria-readonly": ariaReadonly,
    "aria-disabled": ariaDisabled,
    "data-aria-focusstyle": focusClass,
    "data-aria-autofocus": autoFocus
  }, textBoxFunctionalProperties, tagAttributes)), /*#__PURE__*/React.createElement(RenderAsIcon, {
    icon: endIcon,
    className: style.end_icon
  }));
}
TextBox.propTypes = textBoxPropTypes;
TextBox.defaultProps = defaultProps;
TextBox.propsDescription = propsDescription;
TextBox.constantProps = textBoxConstants;

const RenderAsIcon = props => {
  return props.icon ? /*#__PURE__*/React.createElement("span", {
    className: props.className
  }, props.icon) : null;
};

RenderAsIcon.propTypes = {
  icon: PropTypes.any,
  className: PropTypes.string
};