'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var classnames = require('classnames');
var neetoCist = require('@bigbinary/neeto-cist');
var useOnClickOutside = require('@bigbinary/neeto-commons-frontend/react-utils/useOnClickOutside');
var useStateWithDependency = require('@bigbinary/neeto-commons-frontend/react-utils/useStateWithDependency');
var ramda = require('ramda');
var Breadcrumbs = require('./Breadcrumbs.js');
var general = require('@bigbinary/neeto-commons-frontend/utils/general');
var useHotkeys = require('@bigbinary/neeto-hotkeys');
var Check = require('@bigbinary/neeto-icons/Check');
var Close = require('@bigbinary/neeto-icons/Close');
var Button = require('@bigbinary/neetoui/Button');
var Input = require('@bigbinary/neetoui/Input');
var jsxRuntime = require('react/jsx-runtime');
var injectCss = require('./inject-css-B6qYtOJe.js');
var Typography = require('@bigbinary/neetoui/Typography');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
var MoreDropdown = require('./MoreDropdown.js');
require('react-router-dom');
require('@babel/runtime/helpers/objectWithoutProperties');
require('@bigbinary/neeto-icons/MenuHorizontal');
require('@bigbinary/neeto-icons/MenuVertical');
require('@bigbinary/neetoui/Dropdown');
require('@bigbinary/neetoui/Tooltip');
require('react-i18next');

var mergeRefs = function mergeRefs() {
  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
    refs[_key] = arguments[_key];
  }
  return function (node) {
    return refs.forEach(function (ref) {
      return typeof ref === "function" ? ref(node) : ref.current = node;
    });
  };
};

function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Editor = function Editor(_ref) {
  var placeholder = _ref.placeholder,
    allowEmptySubmission = _ref.allowEmptySubmission,
    name = _ref.name,
    isLoading = _ref.isLoading,
    handleRename = _ref.handleRename,
    submitButtonProps = _ref.submitButtonProps,
    handleClose = _ref.handleClose,
    cancelButtonProps = _ref.cancelButtonProps,
    setName = _ref.setName,
    inputProps = _ref.inputProps,
    editMode = _ref.editMode;
  var inputRef = React.useRef();
  var closeRef = useHotkeys("escape", function (event) {
    return handleClose({
      event: event
    });
  }, {
    mode: "scoped",
    enabled: editMode
  });
  var submitRef = useHotkeys(["command+return", "return"], function (event) {
    if (ramda.isEmpty(name) && !allowEmptySubmission) return;
    handleRename(event, name);
  }, {
    mode: "scoped",
    enabled: editMode
  });
  React.useEffect(function () {
    inputRef.current.select();
  }, []);
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "relative flex min-w-0 max-w-full flex-grow",
    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
      className: "neeto-molecules-rename__input-width-maker",
      children: name.replace(/\s/g, ".") || placeholder
    }), /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$3(_objectSpread$3({
      placeholder: placeholder,
      autoFocus: true,
      className: "neeto-molecules-rename__input absolute",
      "data-cy": "form-rename-text-field",
      "data-testid": "neeto-molecules-name-input",
      ref: mergeRefs(closeRef, submitRef, inputRef),
      value: name,
      suffix: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "flex items-center justify-end",
        children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$3({
          className: "neeto-ui-rounded-none",
          "data-cy": "form-rename-submit-button",
          "data-testid": "neeto-molecules-rename-button",
          disabled: !allowEmptySubmission && ramda.isEmpty(name) || isLoading,
          icon: Check,
          loading: isLoading,
          style: "text",
          onClick: function onClick(event) {
            return handleRename(event, name);
          }
        }, submitButtonProps)), /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$3({
          className: "neeto-ui-rounded-none",
          "data-cy": "form-rename-close-button",
          "data-testid": "neeto-molecules-cancel-button",
          disabled: isLoading,
          icon: Close,
          style: "text",
          onClick: function onClick(event) {
            return handleClose({
              event: event
            });
          }
        }, cancelButtonProps))]
      }),
      onChange: general.withEventTargetValue(setName),
      onClick: function onClick(event) {
        return event.stopPropagation();
      }
    }, inputProps), {}, {
      label: null
    }))]
  });
};

var css = ":root{--neeto-molecules-rename-font-size:var(--neeto-ui-text-sm);--neeto-molecules-rename-font-weight:600;--neeto-molecules-rename-letter-spacing:0;--neeto-molecules-rename-line-height:1.2;--neeto-molecules-rename-min-width:7.5rem;--neeto-molecules-rename-color:var(--neeto-ui-black)}.neeto-molecules-rename-common-styles,.neeto-molecules-rename__input .neeto-ui-input input,.neeto-molecules-rename__input-width-maker,.neeto-molecules-rename__text{color:rgb(var(--neeto-ui-black));font-size:var(--neeto-ui-text-sm)!important;font-size:var(--neeto-molecules-rename-font-size)!important;font-weight:600;font-weight:var(--neeto-molecules-rename-font-weight);letter-spacing:0;letter-spacing:var(--neeto-molecules-rename-letter-spacing);line-height:1.2;line-height:var(--neeto-molecules-rename-line-height);margin:0}.neeto-molecules-rename__input{height:100%;margin:0;max-width:100%;min-width:0;position:relative;transition:width .2s ease-in-out;width:100%}.neeto-molecules-rename__input .neeto-ui-input__label-wrapper .neeto-ui-input__max-length{font-size:10px;position:absolute;right:0;top:0;transform:translateY(-100%)}.neeto-molecules-rename__input .neeto-ui-input{height:100%}.neeto-molecules-rename__input .neeto-ui-input .neeto-ui-input__suffix{margin-right:0!important}.neeto-molecules-rename__input .neeto-ui-input input{min-width:0}.neeto-molecules-rename__text{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);cursor:pointer;max-width:28rem;padding:.5rem;transition:var(--neeto-ui-transition)}.neeto-molecules-rename__display-text:hover{border:thin solid rgb(var(--neeto-ui-gray-400))}.neeto-molecules-rename__input-width-maker{background-color:rgb(var(--neeto-ui-white));border:thin solid rgb(var(--neeto-ui-white));border-radius:var(--neeto-ui-rounded);cursor:pointer;display:inline-flex;margin-right:4.25rem;max-width:100%;min-height:2.125rem;min-width:7.5rem;overflow:hidden;padding:.5rem;position:relative;transition:var(--neeto-ui-transition);visibility:hidden;white-space:nowrap}.neeto-molecules-rename-breadcrumbs{margin-bottom:0}.neeto-molecules-rename-breadcrumbs .neeto-molecules-breadcrumb a{display:flex}";
injectCss.n(css,{});

function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RenameMenu = reactUtils.withT(function (_ref) {
  var t = _ref.t,
    handleRenameClick = _ref.handleRenameClick,
    disabled = _ref.disabled,
    dropdownItems = _ref.dropdownItems,
    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
    onDisableStatusToggle = _ref.onDisableStatusToggle,
    onClone = _ref.onClone,
    onDelete = _ref.onDelete,
    isArchived = _ref.isArchived,
    isDisabled = _ref.isDisabled,
    dropdownButtonProps = _ref.dropdownButtonProps,
    dropdownProps = _ref.dropdownProps;
  return /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
    dropdownButtonProps: _objectSpread$2({
      "data-testid": "neeto-molecules-menu-button"
    }, dropdownButtonProps),
    dropdownProps: _objectSpread$2({
      position: "bottom-start",
      onClick: function onClick(event) {
        return event.stopPropagation();
      },
      strategy: "fixed",
      appendTo: function appendTo() {
        return document.body;
      },
      zIndex: "99999"
    }, dropdownProps),
    menuItems: [{
      "data-cy": "form-rename-button",
      onClick: handleRenameClick,
      label: t("neetoMolecules.common.actions.rename"),
      isVisible: !disabled,
      key: "edit-name-menu"
    }, {
      "data-cy": "form-clone-button",
      onClick: onClone,
      label: t("neetoMolecules.common.actions.clone"),
      isVisible: neetoCist.isPresent(onClone),
      key: "clone-entity-menu"
    }, {
      "data-cy": "form-archive-button",
      onClick: onArchiveStatusToggle,
      label: isArchived ? t("neetoMolecules.common.actions.unArchive") : t("neetoMolecules.common.actions.archive"),
      isVisible: neetoCist.isPresent(onArchiveStatusToggle),
      key: "archive-entity-menu"
    }, {
      "data-cy": "form-enable-button",
      onClick: onDisableStatusToggle,
      label: isDisabled ? t("neetoMolecules.common.actions.enable") : t("neetoMolecules.common.actions.disable"),
      isVisible: neetoCist.isPresent(onDisableStatusToggle),
      key: "enable-entity-menu"
    }, {
      "data-cy": "form-delete-button",
      onClick: onDelete,
      label: t("neetoMolecules.common.actions.delete"),
      isVisible: neetoCist.isPresent(onDelete),
      key: "delete-entity-menu"
    }].concat(_toConsumableArray(dropdownItems))
  });
});

function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ViewName = function ViewName(_ref) {
  var disabled = _ref.disabled,
    textProps = _ref.textProps,
    formatText = _ref.formatText,
    dropdownItems = _ref.dropdownItems,
    hideMenu = _ref.hideMenu,
    handleRenameClick = _ref.handleRenameClick,
    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
    onDisableStatusToggle = _ref.onDisableStatusToggle,
    onClone = _ref.onClone,
    onDelete = _ref.onDelete,
    name = _ref.name,
    isArchived = _ref.isArchived,
    isDisabled = _ref.isDisabled,
    dropdownButtonProps = _ref.dropdownButtonProps,
    dropdownProps = _ref.dropdownProps;
  var isDefaultMenuCallbacksPresent = neetoCist.isPresent(onArchiveStatusToggle) || neetoCist.isPresent(onDisableStatusToggle) || neetoCist.isPresent(onDelete) || neetoCist.isPresent(onClone);
  var isMenuVisible = !hideMenu && (neetoCist.isNotEmpty(dropdownItems) || !disabled || isDefaultMenuCallbacksPresent);
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, _objectSpread$1(_objectSpread$1({
      component: "p",
      "data-cy": "form-title",
      "data-testid": "neeto-molecules-value-display",
      style: "body2",
      className: classnames("neeto-molecules-rename__text neeto-molecules-rename__display-text w-full truncate", {
        "cursor-pointer": !disabled,
        "pointer-events-none cursor-text": disabled
      }),
      onClick: handleRenameClick
    }, textProps), {}, {
      children: typeof formatText === "function" ? formatText(name) : name
    })), isMenuVisible && /*#__PURE__*/jsxRuntime.jsx(RenameMenu, {
      disabled: disabled,
      dropdownButtonProps: dropdownButtonProps,
      dropdownItems: dropdownItems,
      dropdownProps: dropdownProps,
      handleRenameClick: handleRenameClick,
      isArchived: isArchived,
      isDisabled: isDisabled,
      onArchiveStatusToggle: onArchiveStatusToggle,
      onClone: onClone,
      onDelete: onDelete,
      onDisableStatusToggle: onDisableStatusToggle
    })]
  });
};

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 Rename = function Rename(_ref) {
  var value = _ref.value,
    onRename = _ref.onRename,
    onClone = _ref.onClone,
    onArchiveStatusToggle = _ref.onArchiveStatusToggle,
    onDisableStatusToggle = _ref.onDisableStatusToggle,
    onDelete = _ref.onDelete,
    isArchived = _ref.isArchived,
    isDisabled = _ref.isDisabled,
    _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
    _ref$hideMenu = _ref.hideMenu,
    hideMenu = _ref$hideMenu === void 0 ? false : _ref$hideMenu,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$dropdownItems = _ref.dropdownItems,
    dropdownItems = _ref$dropdownItems === void 0 ? [] : _ref$dropdownItems,
    _ref$breadcrumbs = _ref.breadcrumbs,
    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
    _ref$textProps = _ref.textProps,
    textProps = _ref$textProps === void 0 ? {} : _ref$textProps,
    _ref$inputProps = _ref.inputProps,
    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
    _ref$submitButtonProp = _ref.submitButtonProps,
    submitButtonProps = _ref$submitButtonProp === void 0 ? {} : _ref$submitButtonProp,
    _ref$cancelButtonProp = _ref.cancelButtonProps,
    cancelButtonProps = _ref$cancelButtonProp === void 0 ? {} : _ref$cancelButtonProp,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$allowEmptySubmis = _ref.allowEmptySubmission,
    allowEmptySubmission = _ref$allowEmptySubmis === void 0 ? false : _ref$allowEmptySubmis,
    _ref$defaultName = _ref.defaultName,
    defaultName = _ref$defaultName === void 0 ? "" : _ref$defaultName,
    formatText = _ref.formatText,
    _ref$dropdownButtonPr = _ref.dropdownButtonProps,
    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
    _ref$dropdownProps = _ref.dropdownProps,
    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps;
  var _useStateWithDependen = useStateWithDependency(value !== null && value !== void 0 ? value : ""),
    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
    name = _useStateWithDependen2[0],
    setName = _useStateWithDependen2[1];
  var _useState = React.useState(isOpen),
    _useState2 = _slicedToArray(_useState, 2),
    editMode = _useState2[0],
    setEditMode = _useState2[1];
  var renameRef = React.useRef(null);
  var initialName = React.useMemo(function () {
    return name;
  }, [editMode]);
  useOnClickOutside(renameRef, function () {
    return editMode && handleClose({
      saveOnOutsideClick: neetoCist.notEquals(name, initialName)
    });
  });
  var handleRename = function handleRename(event, name) {
    event === null || event === void 0 || event.stopPropagation();
    var newName = allowEmptySubmission && ramda.isEmpty(name) ? defaultName : name;
    setName(newName);
    onRename === null || onRename === void 0 || onRename(newName);
    setEditMode(false);
  };
  var handleClose = function handleClose(_ref2) {
    var _ref2$event = _ref2.event,
      event = _ref2$event === void 0 ? null : _ref2$event,
      _ref2$saveOnOutsideCl = _ref2.saveOnOutsideClick,
      saveOnOutsideClick = _ref2$saveOnOutsideCl === void 0 ? false : _ref2$saveOnOutsideCl;
    event === null || event === void 0 || event.stopPropagation();
    saveOnOutsideClick ? handleRename(event, name) : setName(value);
    setEditMode(false);
  };
  var handleRenameClick = function handleRenameClick(event) {
    event.stopPropagation();
    !disabled && setEditMode(true);
  };
  var editNameProps = {
    allowEmptySubmission: allowEmptySubmission,
    cancelButtonProps: cancelButtonProps,
    handleClose: handleClose,
    handleRename: handleRename,
    inputProps: inputProps,
    isLoading: isLoading,
    name: name,
    placeholder: placeholder,
    setName: setName,
    submitButtonProps: submitButtonProps,
    editMode: editMode
  };
  var viewNameProps = {
    disabled: disabled,
    dropdownItems: dropdownItems,
    formatText: formatText,
    handleRenameClick: handleRenameClick,
    hideMenu: hideMenu,
    name: name,
    isArchived: isArchived,
    onArchiveStatusToggle: onArchiveStatusToggle,
    isDisabled: isDisabled,
    onDisableStatusToggle: onDisableStatusToggle,
    onClone: onClone,
    onDelete: onDelete,
    textProps: textProps,
    dropdownButtonProps: dropdownButtonProps,
    dropdownProps: dropdownProps
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    ref: renameRef,
    className: classnames("neeto-molecules-rename flex min-w-0 max-w-md flex-col items-start md:flex-row md:items-center", className),
    children: [neetoCist.isNotEmpty(breadcrumbs) && /*#__PURE__*/jsxRuntime.jsx(Breadcrumbs, {
      breadcrumbs: breadcrumbs,
      hasTrailingSeparator: true,
      className: "neeto-molecules-rename-breadcrumbs"
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "relative flex max-w-full items-center gap-x-2",
      children: editMode ? /*#__PURE__*/jsxRuntime.jsx(Editor, _objectSpread({}, editNameProps)) : /*#__PURE__*/jsxRuntime.jsx(ViewName, _objectSpread({}, viewNameProps))
    })]
  });
};

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