"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CollectionRenameViewModal = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _TextWidthLoader = require("../../../TextWidthLoader");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionViewsDropdown/modals/RenameView/CollectionRenameViewModal.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); }
function _CollectionRenameViewModal({
  state,
  ...rest
}) {
  var _state$views$currentV, _state$views$currentV4;
  const {
    views: {
      renameViewModal,
      collection
    }
  } = state;
  const {
    translate: t
  } = collection;
  const [nameInputValue, setNameInputValue] = (0, _react.useState)(((_state$views$currentV = state.views.currentView) == null ? void 0 : _state$views$currentV.name) ?? '');
  const [statusMessage, setStatusMessage] = (0, _react.useState)();
  const [nameInputStatus, setNameInputStatus] = (0, _react.useState)(undefined);
  const [submitted, setSubmitted] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    if (nameInputValue !== '') {
      setNameInputStatus(undefined);
      setStatusMessage(undefined);
    }
  }, [nameInputValue]);
  (0, _react.useEffect)(() => {
    renameViewModal.events.on('open', onOpenRenameViewModal);
    return () => {
      renameViewModal.events.off('open', onOpenRenameViewModal);
    };
  }, []);
  const onOpenRenameViewModal = () => {
    var _state$views$currentV2;
    setNameInputValue(((_state$views$currentV2 = state.views.currentView) == null ? void 0 : _state$views$currentV2.name) ?? '');
    state.sendRenameViewSelectedBI();
  };
  const onCloseModal = () => {
    setNameInputStatus(undefined);
    setNameInputValue('');
    renameViewModal.close();
  };
  const primaryButtonOnClick = (0, _react.useCallback)(async event => {
    var _state$views$currentV3;
    event == null || event.preventDefault();
    if (submitted || nameInputValue === ((_state$views$currentV3 = state.views.currentView) == null ? void 0 : _state$views$currentV3.name)) {
      return;
    }
    if (nameInputValue === '') {
      setNameInputStatus('error');
      setStatusMessage(t('cairo.noViewName.validationTooltip'));
      return;
    }
    setSubmitted(true);
    await state.renameView(nameInputValue);
    onCloseModal();
  }, [submitted, nameInputValue]);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Modal, (0, _extends2.default)({}, rest, {
    onAfterClose: () => {
      setSubmitted(false);
    },
    isOpen: renameViewModal.isOpen,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement("form", {
    onSubmit: primaryButtonOnClick,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.CustomModalLayout, {
    overflowY: "visible",
    title: t('cairo.manageView.Rename.modal.title'),
    primaryButtonText: submitted ? undefined : t('cairo.manageView.Rename.modal.save.CTA'),
    primaryButtonProps: {
      children: submitted && /*#__PURE__*/_react.default.createElement(_TextWidthLoader.TextWidthLoader, {
        size: "tiny",
        text: t('cairo.manageView.Rename.modal.save.CTA'),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 104,
          columnNumber: 15
        }
      }),
      disabled: nameInputValue === ((_state$views$currentV4 = state.views.currentView) == null ? void 0 : _state$views$currentV4.name),
      type: 'submit'
    },
    primaryButtonOnClick: primaryButtonOnClick,
    secondaryButtonText: t('cairo.manageView.Rename.modal.cancel.CTA'),
    secondaryButtonOnClick: onCloseModal,
    onCloseButtonClick: onCloseModal,
    dataHook: "rename-view-modal",
    width: "510px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 96,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 119,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
    label: t('cairo.manageView.Rename.modal.field.title'),
    dataHook: "rename-view-modal-form-field",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
    autoFocus: true,
    dataHook: "rename-view-modal-input",
    value: nameInputValue,
    onChange: e => setNameInputValue(e.target.value),
    status: nameInputStatus,
    statusMessage: statusMessage,
    maxLength: 50,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 125,
      columnNumber: 17
    }
  })))))));
}
const CollectionRenameViewModal = exports.CollectionRenameViewModal = (0, _mobxReactLite.observer)(_CollectionRenameViewModal);
//# sourceMappingURL=CollectionRenameViewModal.js.map