"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ManageTagsModal = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _react2 = require("@wix/bex-core/react");
var _TagsListItem = require("./List/TagsListItem");
var _ManageTagsModalStCss = require("./ManageTagsModal.st.css.js");
var _ScrollableContent = require("../../../ScrollableContent");
var _ActionModal = require("../../../ActionModal");
var _Trans = require("../../../Trans");
var _NewTagItemEditable = require("./NewTagItemEditable");
var _minimalRequiredWdsRuntimeCheck = require("../../../../minimalRequiredWdsRuntimeCheck");
var _ManageTagsNotification = require("./ManageTagsNotification");
var _bexCore = require("@wix/bex-core");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ManageTagsModalComponent = ({
  state
}) => {
  var _state$tagToDelete;
  if (process.env.NODE_ENV !== 'production') {
    (0, _minimalRequiredWdsRuntimeCheck.minimalRequiredWdsRuntimeCheck)({
      required: '^1.72.0',
      requiredBy: 'WixPatterns/ManageTagsModal'
    });
  }
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  state.ref = (0, _react.useRef)(null);
  const closeModal = (0, _react.useCallback)(() => {
    state.closeManageTagsModal();
  }, [state]);
  const handleCreateClick = (0, _react.useCallback)(() => {
    state.handleCreateCtaClick();
  }, [state]);
  const handleCreateTagFromSearch = (0, _react.useCallback)(() => {
    state.createTagFromSearch();
  }, [state]);
  const handleSearchClear = (0, _react.useCallback)(() => {
    state.handleSearchClear();
  }, [state]);
  const handleSearchChange = (0, _react.useCallback)(event => {
    const newSearchValue = event.target.value;
    state.handleSearchChange(newSearchValue);
  }, [state]);
  const handleNotificationClose = (0, _react.useCallback)(toastConfig => {
    state.hideNotification(toastConfig);
  }, [state]);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
    isOpen: state.isOpen,
    onRequestClose: closeModal,
    shouldCloseOnOverlayClick: true,
    dataHook: "manage-tags-modal",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    width: 510,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.CustomModalLayout, {
    className: (0, _ManageTagsModalStCss.st)(_ManageTagsModalStCss.classes.root),
    overflowY: "visible",
    showFooterDivider: true,
    removeContentPadding: true,
    title: t('cairo.tags.manageTags.modal.title', {
      EntityName: state.entityTypeName
    }),
    subtitle: t('cairo.tags.manageTags.modal.subtitle'),
    sideActions: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
      dataHook: "manage-tags-modal-create-btn",
      size: "small",
      prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 92,
          columnNumber: 29
        }
      }),
      onClick: handleCreateClick,
      disabled: state.isShowingNewTagListItem,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 89,
        columnNumber: 15
      }
    }, t('cairo.tags.manageTags.modal.add.CTA'))),
    primaryButtonText: t('cairo.tags.manageTags.modal.close.CTA'),
    primaryButtonOnClick: closeModal,
    onCloseButtonClick: closeModal,
    dataHook: "manage-tags-modal-layout",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    height: "100%",
    flex: 1,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 105,
      columnNumber: 11
    }
  }, state.toastConfig && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    position: "absolute",
    top: "18px",
    left: "50%",
    transform: "translateX(-50%)",
    maxWidth: "388px",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_ManageTagsNotification.ManageTagsNotification, {
    toastConfig: state.toastConfig,
    onClose: handleNotificationClose,
    dataHook: "manage-tags-modal-notification",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 114,
      columnNumber: 17
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    gap: "SP2",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "0 SP4",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 122,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Search, {
    autoFocus: true,
    dataHook: "manage-tags-modal-search",
    onChange: handleSearchChange,
    value: state.searchValue,
    placeholder: t('cairo.tags.manageTags.modal.search.placeholder'),
    onEnterPressed: handleCreateTagFromSearch,
    onClear: handleSearchClear,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 123,
      columnNumber: 17
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 135,
      columnNumber: 15
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    maxHeight: 446,
    minHeight: 225,
    dataHook: "manage-tags-modal-tags-list",
    overflowY: "auto",
    paddingBottom: "SP1",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 137,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_ScrollableContent.ScrollableContent, {
    overflowY: true,
    smooth: true,
    ref: state.ref,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 145,
      columnNumber: 15
    }
  }, state.searchValue && state.shownItems.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 147,
      columnNumber: 19
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.AddItem, {
    theme: "plain",
    size: "tiny",
    alignItems: "left",
    onClick: handleCreateTagFromSearch,
    dataHook: "manage-tags-modal-list-add",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 148,
      columnNumber: 21
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    skin: "primary",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 155,
      columnNumber: 23
    }
  }, /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
    i18nKey: "cairo.tags.manageTags.modal.list.create.CTA",
    values: {
      tagName: `${state.searchValue.slice(0, _bexCore.TAG_MAX_LENGTH)}`
    },
    components: {
      name: /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
        weight: "bold",
        skin: "primary",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 165,
          columnNumber: 35
        }
      })
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 156,
      columnNumber: 25
    }
  })))), state.shownItems.map((tag, idx) => /*#__PURE__*/_react.default.createElement(_TagsListItem.TagsListItem, {
    state: state,
    key: tag.id,
    tag: tag,
    isLastTag: !state.isShowingNewTagListItem && idx === state.shownItems.length - 1,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 173,
      columnNumber: 19
    }
  })), state.isShowingNewTagListItem && /*#__PURE__*/_react.default.createElement(_NewTagItemEditable.NewTagItemEditable, {
    state: state,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 184,
      columnNumber: 19
    }
  })))))), state.confirmModalState.value && /*#__PURE__*/_react.default.createElement(_ActionModal.MessageActionModal, (0, _extends2.default)({
    dataHook: "manage-tags-modal-confirm-delete-modal",
    state: state.confirmModalState,
    content: /*#__PURE__*/_react.default.createElement(_Trans.Trans, {
      i18nKey: "cairo.tags.manageTags.modal.deleteModal.body",
      values: {
        name: (_state$tagToDelete = state.tagToDelete) == null ? void 0 : _state$tagToDelete.name
      },
      components: {
        text: /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 200,
            columnNumber: 23
          }
        }),
        name: /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
          weight: "bold",
          __self: void 0,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 201,
            columnNumber: 23
          }
        })
      },
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 196,
        columnNumber: 13
      }
    })
  }, state.confirmModalState.value, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 192,
      columnNumber: 9
    }
  })));
};
const ManageTagsModal = exports.ManageTagsModal = (0, _mobxReactLite.observer)(ManageTagsModalComponent);
//# sourceMappingURL=ManageTagsModal.js.map