"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.TagsWidgetContent = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _react2 = require("@wix/bex-core/react");
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _mobx = require("mobx");
var _bexCore = require("@wix/bex-core");
var _TagsModalState = require("../../state/TagsModalState");
var _useSelector = require("../../useSelector");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/TagsWidget/TagsWidgetContent.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 ReadonlyTagsWidgetContent = ({
  formState
}) => {
  const {
    translate: t,
    initTask
  } = (0, _react2.useWixPatternsContainer)();
  (0, _useSelector.useSelector)(() => initTask.status);
  if (formState.displayedAssignedTags.length === 0) {
    return /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
      dataHook: "tags-widget-readonly-empty-state",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 7
      }
    }, t('cairo.tags.tagsField.readOnly.emptyState'));
  }
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "tiny",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 53,
      columnNumber: 5
    }
  }, formState.displayedAssignedTags.map(tag => /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
    key: tag.id,
    id: tag.id,
    dataHook: "tags-widget-tag",
    removable: false,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 9
    }
  }, tag.label)));
};
const ManageTagsModal = /*#__PURE__*/_react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require(/* webpackChunkName: "ManageTagsModal" */'../Tags/ManageTags/ManageTagsModal/ManageTagsModal'))).then(module => ({
  default: module.ManageTagsModal
})));
const _TagsWidgetContent = ({
  state,
  onSubmit,
  entityTypeName,
  initialTags,
  entityId,
  readOnly,
  popoverProps,
  manageTagsShowUndoToast
}) => {
  var _initialTags$privateT;
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const [formState] = (0, _react.useState)(() => (0, _mobx.runInAction)(() => state.tagsFormState ?? (state.tagsFormState = new _bexCore.TagsFormState({
    initialTags,
    tagsManagementState: state.tagsManagementState,
    origin: state.origin,
    entityTypeName
  }))));
  const [tagsModalState] = (0, _react.useState)(() => new _TagsModalState.TagsModalState({
    tagsManagementState: state.tagsManagementState,
    entityTypeName,
    showUndoToast: manageTagsShowUndoToast
  }));
  (0, _react.useEffect)(() => {
    const disposers = [formState.init({
      entityId
    }), tagsModalState.init()];
    return () => {
      disposers.forEach(disposer => disposer());
    };
  }, []);
  const initialTagIdsKey = ((initialTags == null || (_initialTags$privateT = initialTags.privateTags) == null ? void 0 : _initialTags$privateT.tagIds) ?? []).join(',');
  (0, _react.useEffect)(() => {
    var _initialTags$privateT2;
    formState.tagsAssignmentState.replaceAssigned((initialTags == null || (_initialTags$privateT2 = initialTags.privateTags) == null ? void 0 : _initialTags$privateT2.tagIds) ?? []);
  }, [initialTagIdsKey]);
  const {
    shouldAllowTagsPagination
  } = formState.tagsManagementState;
  const tagsOptions = (0, _react.useMemo)(() => {
    var _formState$searchValu;
    const options = formState.displayedTagOptions;
    const addTagOptionItems = formState.shouldShowCreateTagOption ? [(0, _designSystem.listItemActionBuilder)({
      id: _bexCore.ADD_ITEM_OPTION_ID,
      title: t('cairo.tags.tagsWidget.options.add.CTA', {
        tagName: (_formState$searchValu = formState.searchValue) == null ? void 0 : _formState$searchValu.slice(0, _bexCore.TAG_MAX_LENGTH)
      }),
      prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 132,
          columnNumber: 25
        }
      })
    })] : [];
    return [...addTagOptionItems, ...options];
  }, [formState.displayedTagOptions, formState.searchValue, formState.shouldShowCreateTagOption, formState.displayedAssignedTags]);
  const handleSearchChange = (0, _react.useCallback)(event => {
    formState.handleSearchChange(event.target.value);
  }, []);
  const handleTagSelect = (0, _react.useCallback)(async option => {
    const convertedOption = {
      id: option.id,
      value: option.value
    };
    formState.handleTagSelect(convertedOption, onSubmit);
  }, [onSubmit]);
  const handleTagRemove = (0, _react.useCallback)(tagId => {
    formState.unassignTag(tagId, onSubmit);
  }, [onSubmit]);
  const handleOptionsShow = (0, _react.useCallback)(() => {
    formState.handleOptionsShow();
  }, []);
  const handleManageTagsCtaClick = (0, _react.useCallback)(() => {
    formState.handleManageTagsCtaClick();
    tagsModalState.openManageTagsModal({
      origin: formState.origin,
      tagSubOrigin: 'tagsWidget'
    });
  }, []);
  const handleMultiSelectFocus = (0, _react.useCallback)(() => {
    formState.setIsMultiSelectOnFocus(true);
  }, []);
  const handleMultiSelectBlur = (0, _react.useCallback)(() => {
    formState.setIsMultiSelectOnFocus(false);
  }, []);
  if (readOnly) {
    return /*#__PURE__*/_react.default.createElement(ReadonlyTagsWidgetContent, {
      formState: formState,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 188,
        columnNumber: 12
      }
    });
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.MultiSelect, (0, _extends2.default)({
    popoverProps: popoverProps
  }, shouldAllowTagsPagination ? {
    infiniteScroll: true,
    hasMore: formState.tagsManagementState.hasMore,
    loadMore: () => formState.tagsManagementState.loadMore()
  } : {}, {
    value: formState.searchValue,
    onChange: handleSearchChange,
    options: tagsOptions,
    onFocus: handleMultiSelectFocus,
    onBlur: handleMultiSelectBlur,
    tags: formState.displayedAssignedTags,
    onOptionsShow: handleOptionsShow,
    markedOption: formState.shouldShowCreateTagOption ? _bexCore.ADD_ITEM_OPTION_ID : true,
    customSuffix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 213,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
      size: "small",
      prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 216,
          columnNumber: 27
        }
      }),
      dataHook: "assign-tags-cta",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 214,
        columnNumber: 13
      }
    }, t('cairo.tags.tagsWidget.add.CTA'))),
    fixedFooter: formState.isInEmptyState ? undefined : /*#__PURE__*/_react.default.createElement("div", {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 225,
        columnNumber: 13
      }
    }, !!tagsOptions.length && /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 226,
        columnNumber: 40
      }
    }), /*#__PURE__*/_react.default.createElement(_designSystem.ListItemAction, {
      dataHook: "manage-tags-cta",
      onClick: handleManageTagsCtaClick,
      id: _bexCore.MANAGE_TAGS_OPTION_ID,
      title: t('cairo.tags.tagsWidget.options.manage.CTA'),
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 227,
        columnNumber: 15
      }
    })),
    onSelect: handleTagSelect,
    onRemoveTag: handleTagRemove,
    placeholder: formState.isInEmptyState && formState.isMultiSelectOnFocus ? t('cairo.tags.tagsWidget.input.placeholder') : undefined,
    dataHook: "tags-widget-multi-select",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 193,
      columnNumber: 7
    }
  })), /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
    fallback: null,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 245,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(ManageTagsModal, {
    state: tagsModalState,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 246,
      columnNumber: 9
    }
  })));
};
const TagsWidgetContent = exports.TagsWidgetContent = (0, _mobxReactLite.observer)(_TagsWidgetContent);
//# sourceMappingURL=TagsWidgetContent.js.map