"use strict";

exports.__esModule = true;
exports.ArchivedItemsPanel = void 0;
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _ScrollableContent = require("../ScrollableContent");
var _ArchivedItemsList = require("./ArchivedItemsList");
var _react2 = require("@wix/bex-core/react");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/ArchivedItemsPanel/ArchivedItemsPanel.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 _ArchivedItemsPanel({
  items,
  onBackButtonClick,
  onCloseButtonClick,
  dataExtension,
  dataHook = 'custom-columns'
}) {
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const [isVisible, setIsVisible] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    setTimeout(() => setIsVisible(true), 10);
  }, []);
  const closeIfEmpty = () => {
    const remainingItems = dataExtension.archivedItems;
    if (remainingItems.length === 0) {
      handleBack();
    }
  };
  const handleRestore = async item => {
    await dataExtension.restoreField({
      id: item.id,
      origin: 'Archived items panel',
      reportBi: dataExtension.container.createBILogger({
        componentType: 'ArchivedItemsPanel'
      })
    });
    closeIfEmpty();
  };
  const handleDelete = (0, _react.useCallback)(item => {
    var _dataExtension$delete;
    (_dataExtension$delete = dataExtension.deleteFieldModal) == null || _dataExtension$delete.modal.open({
      id: item.id,
      origin: 'Archived items panel'
    });
  }, [dataExtension]);
  const slideStyle = (0, _react.useMemo)(() => ({
    position: 'absolute',
    top: 0,
    right: isVisible ? 0 : '-600px',
    bottom: 0,
    width: '100%',
    maxWidth: '600px',
    backgroundColor: 'white',
    transition: 'right 0.3s ease-out',
    display: 'flex',
    flexDirection: 'column',
    zIndex: 1
  }), [isVisible]);
  const handleBack = (0, _react.useCallback)(() => {
    // Trigger slide-out animation
    setIsVisible(false);
    // Wait for animation to complete before calling onBackButtonClick
    setTimeout(() => {
      onBackButtonClick();
    }, 300); // Match the transition duration
  }, [onBackButtonClick]);
  const handleClose = (0, _react.useCallback)(() => {
    // Trigger slide-out animation
    setIsVisible(false);
    // Close both panels immediately so they animate together
    onCloseButtonClick();
  }, [onCloseButtonClick]);
  const tooltipKey = (0, _react.useMemo)(() => {
    return dataHook === 'custom-columns' ? 'cairo.archivedFields.back.custom-columns.tooltip' : 'cairo.archivedFields.back.manage-custom-fields.tooltip';
  }, [dataHook]);
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": `${dataHook}-archived-items-panel-container`,
    style: slideStyle,
    onClick: e => e.stopPropagation(),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SidePanel // PatternsSidePanel is overriding the back button to close the panel
  , {
    dataHook: `${dataHook}-archived-items-panel`,
    width: "100%",
    closeButtonProps: {
      onClick: handleClose
    },
    onBackButtonClick: handleBack,
    backButtonProps: {
      description: t(tooltipKey),
      tooltipProps: {
        moveArrowTo: 80
      }
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 112,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SidePanel.Header, {
    title: t('cairo.archivedFields.title'),
    subtitle: t('cairo.archivedFields.subtitle'),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 124,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement(_ScrollableContent.ScrollableContent, {
    overflowY: true,
    dataHook: `${dataHook}-archived-items-panel-scroll-container`,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 128,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_ArchivedItemsList.ArchivedItemsList, {
    items: items,
    onRestore: handleRestore,
    onDelete: handleDelete,
    dataHook: dataHook,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 11
    }
  }))));
}
const ArchivedItemsPanel = exports.ArchivedItemsPanel = (0, _mobxReactLite.observer)(_ArchivedItemsPanel);
//# sourceMappingURL=ArchivedItemsPanel.js.map