"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CollectionSaveViewModal = 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/SaveView/CollectionSaveViewModal.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 _CollectionSaveViewModal({
  state,
  ...rest
}) {
  const {
    views: {
      saveViewModal,
      collection
    }
  } = state;
  const {
    translate: t
  } = collection;
  const [nameInputValue, setNameInputValue] = (0, _react.useState)('');
  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)(() => {
    saveViewModal.events.on('open', sendSaveNewViewSelectedBI);
    return () => {
      saveViewModal.events.off('open', sendSaveNewViewSelectedBI);
    };
  }, []);
  const sendSaveNewViewSelectedBI = () => {
    state.sendSaveNewViewSelectedBI();
  };
  const onCloseModal = () => {
    setNameInputStatus(undefined);
    setNameInputValue('');
    saveViewModal.close();
  };
  const primaryButtonOnClick = (0, _react.useCallback)(async event => {
    event == null || event.preventDefault();
    if (submitted) {
      return;
    }
    if (nameInputValue === '') {
      setNameInputStatus('error');
      setStatusMessage(t('cairo.noViewName.validationTooltip'));
      return;
    }
    setSubmitted(true);
    await state.saveNewView(nameInputValue);
    onCloseModal();
  }, [submitted, nameInputValue]);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Modal, (0, _extends2.default)({}, rest, {
    onAfterClose: () => {
      setSubmitted(false);
    },
    isOpen: saveViewModal.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.table.saveViewModal.title'),
    subtitle: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
      secondary: true,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 101,
        columnNumber: 15
      }
    }, t('cairo.table.saveViewModal.body'), state.learnMoreLink && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
      as: "a",
      rel: "noopener",
      target: "_blank",
      href: state.learnMoreLink,
      dataHook: "save-view-modal-learn-more-link",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 106,
        columnNumber: 21
      }
    }, t('cairo.table.saveViewModal.learnMoreLink'))))),
    primaryButtonText: submitted ? undefined : t('cairo.saveViewModal.saveButton'),
    primaryButtonProps: {
      children: submitted && /*#__PURE__*/_react.default.createElement(_TextWidthLoader.TextWidthLoader, {
        size: "tiny",
        text: t('cairo.saveViewModal.saveButton'),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 125,
          columnNumber: 15
        }
      })
    },
    primaryButtonOnClick: primaryButtonOnClick,
    secondaryButtonText: t('cairo.saveViewModal.cancelButton'),
    secondaryButtonOnClick: onCloseModal,
    onCloseButtonClick: onCloseModal,
    dataHook: "save-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: 138,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 139,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
    label: t('cairo.table.saveViewModal.nameLabel'),
    dataHook: "save-view-modal-form-field",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
    autoFocus: true,
    placeholder: state.viewNamePlaceholder ?? t('cairo.table.saveViewModal.placeholder'),
    dataHook: "save-view-modal-input",
    value: nameInputValue,
    onChange: e => setNameInputValue(e.target.value),
    status: nameInputStatus,
    statusMessage: statusMessage,
    maxLength: 50,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 144,
      columnNumber: 17
    }
  })))))));
}
const CollectionSaveViewModal = exports.CollectionSaveViewModal = (0, _mobxReactLite.observer)(_CollectionSaveViewModal);
//# sourceMappingURL=CollectionSaveViewModal.js.map