"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CustomFieldsPanel = void 0;
exports._CustomFieldsPanel = _CustomFieldsPanel;
var _bexCore = require("@wix/bex-core");
var _react = require("@wix/bex-core/react");
var _useRafRender = require("../../hooks/useRafRender");
var _react2 = _interopRequireDefault(require("react"));
var _designSystem = require("@wix/design-system");
var _ScrollableContent = require("../ScrollableContent");
var _mobxReactLite = require("mobx-react-lite");
var _CustomFieldsList = require("./CustomFieldsList");
var _AddCustomFieldCTAButton = require("./AddCustomFieldCTAButton");
var _bi = require("@wix/bex-core/bi");
var _PatternsSidePanel = require("../SidePanel/PatternsSidePanel");
var _DataExtension = require("../DataExtension/DataExtension");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldsPanel/CustomFieldsPanel.tsx";
function _CustomFieldsPanel({
  state
}) {
  var _state$dataExtension;
  const container = (0, _react.useWixPatternsContainer)();
  const {
    translate: t
  } = container;
  const origin = 'Custom fields panel';
  const entered = (0, _useRafRender.useRafRender)();
  if (!entered) {
    return null;
  }
  return /*#__PURE__*/_react2.default.createElement(_PatternsSidePanel.PatternsSidePanel, {
    dataHook: "custom-fields-panel",
    width: "100%",
    onClose: () => {
      state.reportBi((0, _bexCore.withoutDefaults)(_bi.cairoFiltersPanelUsed)({
        isOpened: false,
        feature: 'Manage custom fields',
        origin: 'X Button'
      }));
      state.closeSidePanel == null || state.closeSidePanel();
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react2.default.createElement(_designSystem.SidePanel.Header, {
    title: t('cairo.customFields.manageFields.title'),
    subtitle: t('cairo.customFields.manageFields.subtitle'),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react2.default.createElement(_ScrollableContent.ScrollableContent, {
    overflowY: true,
    dataHook: "custom-fields-panel-scroll-container",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 7
    }
  }, ((_state$dataExtension = state.dataExtension) == null ? void 0 : _state$dataExtension.shouldDisplayArchive) && /*#__PURE__*/_react2.default.createElement(_DataExtension.DataExtension.CustomColumnsArchivedItemsCTAButton, {
    dataExtension: state.dataExtension,
    onCloseSidePanel: () => state.closeSidePanel == null ? void 0 : state.closeSidePanel(),
    dataHook: "custom-fields",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react2.default.createElement(_CustomFieldsList.CustomFieldsList, {
    state: state,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 58,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react2.default.createElement(_designSystem.Box, {
    direction: "vertical",
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 61,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react2.default.createElement(_designSystem.Divider, {
    direction: "horizontal",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 62,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react2.default.createElement(_designSystem.Box, {
    padding: "SP4",
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 63,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react2.default.createElement(_AddCustomFieldCTAButton.AddCustomFieldCTAButton, {
    state: state,
    onClick: () => {
      state.openCustomFieldModal({
        origin
      });
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 11
    }
  }))));
}
const CustomFieldsPanel = exports.CustomFieldsPanel = (0, _mobxReactLite.observer)(_CustomFieldsPanel);
//# sourceMappingURL=CustomFieldsPanel.js.map