import React, { useCallback } from "react";
import classNames from "classnames";
import { StyledMenuSelector, StyledMenuSelectorBack, StyledMenuSelectorDots, StyledMenuSelectorInner } from "./Styles";
import { Input } from "../Input";
export const MenuSelector = _ref => {
  let {
    defaultValue,
    children,
    placeholder,
    onChange,
    onBack,
    onEdit,
    autoFocus = false,
    className,
    onFocus,
    onBlur,
    autoComplete = false
  } = _ref;
  const handleChange = useCallback(e => {
    if (typeof onChange === "function") {
      onChange(e.target.value);
    }
  }, [onChange]);
  return /*#__PURE__*/React.createElement(StyledMenuSelector, {
    className: classNames("c-menu-selector", className)
  }, /*#__PURE__*/React.createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorBack, {
    onClick: onBack,
    width: "16px",
    height: "16px"
  }) : null, /*#__PURE__*/React.createElement(Input, {
    onChange: handleChange,
    placeholder: placeholder,
    autoFocus: autoFocus,
    defaultValue: defaultValue,
    onFocus: onFocus,
    onBlur: onBlur,
    autoComplete: autoComplete ? "on" : "off"
  }), typeof onEdit === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorDots, {
    onClick: onEdit
  }) : null), children);
};
MenuSelector.displayName = "MenuSelector";
//# sourceMappingURL=MenuSelector.js.map