'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var neetoCist = require('@bigbinary/neeto-cist');
var Info = require('@bigbinary/neeto-icons/Info');
var Input = require('@bigbinary/neetoui/formik/Input');
var ramda = require('ramda');
var CopyToClipboardButton = require('./CopyToClipboardButton.js');
var injectCss = require('./inject-css-B6qYtOJe.js');
var jsxRuntime = require('react/jsx-runtime');
require('@babel/runtime/helpers/objectWithoutProperties');
require('classnames');
require('@bigbinary/neeto-commons-frontend/utils/general');
require('@bigbinary/neeto-icons/Copy');
require('@bigbinary/neeto-icons/Check');
require('@bigbinary/neetoui/Button');
require('react-i18next');

var INPUT_FIELD_MIN_WIDTH = 60;

var css = ".nm-suffixed-input-field{max-width:100%;min-width:0;width:-moz-max-content;width:max-content}.nm-suffixed-input-field .neeto-ui-input{align-items:stretch}.nm-suffixed-input-field .neeto-ui-input .neeto-ui-input__suffix{background-color:rgb(var(--neeto-ui-gray-200));cursor:not-allowed;margin:0 0 0 .25rem!important;padding:.3125rem .5rem;white-space:nowrap}.nm-suffixed-input-field input{padding-right:0!important}";
injectCss.n(css,{});

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SuffixedInput = function SuffixedInput(_ref) {
  var _placeholderRef$curre2, _placeholderRef$curre3;
  var placeholder = _ref.placeholder,
    helpUrl = _ref.helpUrl,
    helpIconTooltipContent = _ref.helpIconTooltipContent,
    label = _ref.label,
    value = _ref.value,
    getInputRef = _ref.getInputRef,
    suffix = _ref.suffix,
    _ref$isCopyToClipboar = _ref.isCopyToClipboardEnabled,
    isCopyToClipboardEnabled = _ref$isCopyToClipboar === void 0 ? false : _ref$isCopyToClipboar,
    _ref$name = _ref.name,
    name = _ref$name === void 0 ? "email" : _ref$name,
    _ref$inputProps = _ref.inputProps,
    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps;
  var _useState = React.useState(INPUT_FIELD_MIN_WIDTH),
    _useState2 = _slicedToArray(_useState, 2),
    initialInputWidth = _useState2[0],
    setInitialInputWidth = _useState2[1];
  var inputRef = React.useRef(null);
  var placeholderRef = React.useRef(null);
  var setInputRef = function setInputRef(ref) {
    inputRef.current = ref;
    getInputRef === null || getInputRef === void 0 || getInputRef(ref);
  };
  React.useEffect(function () {
    var _placeholderRef$curre;
    //To handle the input width on initial render.
    var placeholderSpanWidth = (_placeholderRef$curre = placeholderRef.current) === null || _placeholderRef$curre === void 0 ? void 0 : _placeholderRef$curre.offsetWidth;
    setInitialInputWidth(placeholderSpanWidth);
  }, []);
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
      // Dummy element to calculate the width to be set for the input. Do not remove.
      className: "pointer-events-none invisible absolute pl-2",
      ref: placeholderRef,
      children: value || placeholder
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "inline-flex max-w-full items-end gap-2",
      children: [/*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread(_objectSpread({}, _objectSpread({
        label: label,
        name: name,
        placeholder: placeholder
      }, inputProps)), {}, {
        className: "nm-suffixed-input-field",
        ref: setInputRef,
        type: "text",
        labelProps: {
          helpIconProps: neetoCist.isPresent(helpUrl) && {
            icon: Info,
            className: "cursor-pointer opacity-75 hover:opacity-100 transition-opacity duration-300 ease-in-out",
            onClick: function onClick() {
              return window.open(helpUrl, "_blank");
            },
            tooltipProps: {
              content: helpIconTooltipContent,
              position: "right",
              disabled: neetoCist.isNotPresent(helpUrl)
            }
          }
        },
        style: {
          minWidth: ramda.isEmpty(value) ? INPUT_FIELD_MIN_WIDTH : 0,
          width: (_placeholderRef$curre2 = (_placeholderRef$curre3 = placeholderRef.current) === null || _placeholderRef$curre3 === void 0 ? void 0 : _placeholderRef$curre3.offsetWidth) !== null && _placeholderRef$curre2 !== void 0 ? _placeholderRef$curre2 : initialInputWidth // Additional 2px to act as a buffer.
        },
        suffix:
        /*#__PURE__*/
        // Added onClick to focus the input even when the suffix part is clicked.
        jsxRuntime.jsx("span", {
          onClick: function onClick() {
            var _inputRef$current;
            return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
          },
          children: suffix
        })
      })), isCopyToClipboardEnabled && /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
        disabled: ramda.isEmpty(value),
        style: "text",
        value: "".concat(value).concat(suffix)
      })]
    })]
  });
};

module.exports = SuffixedInput;
//# sourceMappingURL=SuffixedInput.js.map
