import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useState, useRef, useEffect } from 'react';
import { isPresent, isNotPresent } from '@bigbinary/neeto-cist';
import Info from '@bigbinary/neeto-icons/Info';
import Input from '@bigbinary/neetoui/formik/Input';
import { isEmpty } from 'ramda';
import CopyToClipboardButton from './CopyToClipboardButton.js';
import { n } from './inject-css-C2dztUxs.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'classnames';
import '@bigbinary/neeto-commons-frontend/utils/general';
import '@bigbinary/neeto-icons/Copy';
import '@bigbinary/neeto-icons/Check';
import '@bigbinary/neetoui/Button';
import '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-block:0;margin-inline-end:0;margin-inline-start:.25rem;padding:.3125rem .5rem;white-space:nowrap}.nm-suffixed-input-field input{padding-inline-end:0!important}";
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 = useState(INPUT_FIELD_MIN_WIDTH),
    _useState2 = _slicedToArray(_useState, 2),
    initialInputWidth = _useState2[0],
    setInitialInputWidth = _useState2[1];
  var inputRef = useRef(null);
  var placeholderRef = useRef(null);
  var setInputRef = function setInputRef(ref) {
    inputRef.current = ref;
    getInputRef === null || getInputRef === void 0 || getInputRef(ref);
  };
  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__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx("span", {
      // Dummy element to calculate the width to be set for the input. Do not remove.
      className: "pointer-events-none invisible absolute ps-2",
      ref: placeholderRef,
      children: value || placeholder
    }), /*#__PURE__*/jsxs("div", {
      className: "inline-flex max-w-full items-end gap-2",
      children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, _objectSpread({
        label: label,
        name: name,
        placeholder: placeholder
      }, inputProps)), {}, {
        className: "nm-suffixed-input-field",
        ref: setInputRef,
        type: "text",
        labelProps: {
          helpIconProps: 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: isNotPresent(helpUrl)
            }
          }
        },
        style: {
          minWidth: 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.
        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__*/jsx(CopyToClipboardButton, {
        disabled: isEmpty(value),
        style: "text",
        value: "".concat(value).concat(suffix)
      })]
    })]
  });
};

export { SuffixedInput as default };
//# sourceMappingURL=SuffixedInput.js.map
