"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SchemaCard = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _designSystem = require("@wix/design-system");
var _mobxReactLite = require("mobx-react-lite");
var _react2 = require("@wix/bex-core/react");
var _SidePanelsState = require("../../state/SidePanelsState");
var _CustomColumnsEntityPageState = require("../../state/CustomColumnsEntityPageState");
var _CustomColumnsEntityPagePanelMount = require("../CustomColumnsPanel/CustomColumnsEntityPagePanelMount");
var _SchemaContext = require("../../providers/SchemaContext");
var _CustomColumnsDragAndDrop = require("../CustomColumns/CustomColumnsDragAndDrop");
var _SchemaCardState = require("../../state/SchemaCard/SchemaCardState");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SchemaCard/SchemaCard.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 _SchemaCard({
  title,
  subtitle,
  renderField,
  ...rest
}) {
  const container = (0, _react2.useWixPatternsContainer)();
  const {
    translate: t
  } = container;
  const {
    modalsContainerRef
  } = (0, _react2.usePageContext)();
  const schemaContext = (0, _SchemaContext.useSchemaContext)();
  const schema = schemaContext == null ? void 0 : schemaContext.schema;
  const fields = (0, _react.useMemo)(() => schema ? Object.keys(schema.fields).filter(id => schema.fields[id]).map(id => ({
    id
  })) : [], [schema == null ? void 0 : schema.fields]);
  const [schemaCardState] = (0, _react.useState)(() => schema && fields.length > 0 ? new _SchemaCardState.SchemaCardState({
    fields,
    persistencyKey: schema.id,
    container
  }) : null);
  (0, _react.useEffect)(() => schemaCardState == null ? void 0 : schemaCardState.init(), []);
  const fieldsState = schemaCardState == null ? void 0 : schemaCardState.fieldsState;
  const state = (0, _react.useMemo)(() => {
    if (!fieldsState || !schema) {
      return null;
    }
    const panels = new _SidePanelsState.SidePanelsState({
      container,
      panelGroupName: 'entity-page'
    });
    return new _CustomColumnsEntityPageState.CustomColumnsEntityPageState({
      container,
      panels,
      fieldsState,
      schema,
      showFieldTypeIcons: true,
      dragAndDrop: _CustomColumnsDragAndDrop.CustomColumnsDragAndDrop,
      modalsContainerRef
    });
  }, [fieldsState, schema]);
  return /*#__PURE__*/_react.default.createElement(_designSystem.Card, (0, _extends2.default)({}, rest, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 82,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Card.Header, {
    title: title,
    subtitle: subtitle,
    suffix: state ? /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
      size: "small",
      priority: "secondary",
      dataHook: "schema-card-manage-fields-button",
      onClick: () => state.panels.toggleSidePanel('customColumns'),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 88,
        columnNumber: 13
      }
    }, t('cairo.table.manage-fields.button.cta')) : undefined,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Card.Divider, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Card.Content, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 101,
      columnNumber: 9
    }
  }, fieldsState && fieldsState.orderedFields.filter(f => fieldsState.isFieldVisible(f.id)).map(f => renderField(f.id)))), (schemaContext == null ? void 0 : schemaContext.addField) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "SP4",
    boxSizing: "border-box",
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    dataHook: "schema-card-add-field",
    onClick: schemaContext.addField,
    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 113,
        columnNumber: 25
      }
    }),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 110,
      columnNumber: 11
    }
  }, t('cairo.customFields.addCustomField.CTA'))), state && /*#__PURE__*/_react.default.createElement(_CustomColumnsEntityPagePanelMount.CustomColumnsEntityPagePanelMount, {
    state: state,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 119,
      columnNumber: 17
    }
  }));
}
_SchemaCard.displayName = 'SchemaCard';
const SchemaCard = exports.SchemaCard = (0, _mobxReactLite.observer)(_SchemaCard);
//# sourceMappingURL=SchemaCard.js.map