"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DesignerScreen = DesignerScreen;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ReactComponent = _interopRequireDefault(require("../../../Shared/PropTypes/ReactComponent"));
var _Header = _interopRequireDefault(require("../../Shared/Containers/Header"));
var _InvalidConfigurationNotice = _interopRequireDefault(require("../../Shared/Containers/InvalidConfigurationNotice"));
var _DesignAreaControlbox = _interopRequireDefault(require("./Containers/DesignAreaControlbox"));
var _EditDesignButton = _interopRequireDefault(require("./Containers/EditDesignButton"));
var _CloseGraphicsEditorButton = _interopRequireDefault(require("./Containers/CloseGraphicsEditorButton"));
var _CloseDesignEditor = _interopRequireDefault(require("./Containers/CloseDesignEditor"));
var _ImageEditDialog = _interopRequireDefault(require("./Containers/ImageEditDialog"));
var _DefaultCanvasProvider = require("../../Shared/Providers/DefaultCanvasProvider");
var _DesignerAlignTarget = require("../Visualization/DesignerAlignTarget");
var _DefaultLayout = _interopRequireDefault(require("./Layouts/DefaultLayout"));
var _PopupAreaProvider = require("./Layouts/PopupAreaProvider");
var _TwoSideBottomBar = require("./Layouts/Mobile/TwoSideBottomBar");
var _Designer = _interopRequireDefault(require("./Containers/Designer"));
var _DesignerSelectionToolbox = _interopRequireDefault(require("./Containers/DesignerSelectionToolbox"));
var _AddVisualElement = _interopRequireDefault(require("./Containers/AddVisualElement"));
var _ScreenPropTypes = _interopRequireDefault(require("../../Screens/Configurator/ScreenPropTypes"));
var _FullScreenView = _interopRequireDefault(require("./Components/FullScreenView/FullScreenView"));
var _DesignerClickAwayListener = _interopRequireDefault(require("./MultilayerComponents/DesignerClickAwayListener"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * Main Screen of the configurator
 */
function DesignerScreen(props) {
  var imageOnly = props.imageOnly,
    showDesigner = props.showDesigner,
    showProductViewButton = props.showProductViewButton,
    fallbackMode = props.fallbackMode,
    is3DvisualMode = props.is3DvisualMode,
    isPortraitMode = props.isPortraitMode,
    _renderHeader = props.renderHeader,
    renderSaveConfiguration = props.renderSaveConfiguration,
    renderSendEmail = props.renderSendEmail,
    renderPdfDownload = props.renderPdfDownload,
    renderLoadConfiguration = props.renderLoadConfiguration,
    renderError = props.renderError,
    renderAlertMessages = props.renderAlertMessages,
    renderConfirm = props.renderConfirm,
    renderAmountPrice = props.renderAmountPrice,
    renderDesigner = props.renderDesigner,
    renderDesignerSelectionToolbox = props.renderDesignerSelectionToolbox,
    renderDesignerFallback = props.renderDesignerFallback,
    _renderVisualization = props.renderVisualization,
    renderDesignAreaControlbox = props.renderDesignAreaControlbox,
    renderEditDesignButton = props.renderEditDesignButton,
    renderInvalidConfigurationNotice = props.renderInvalidConfigurationNotice,
    renderCloseGraphicsEditorButton = props.renderCloseGraphicsEditorButton,
    renderImageEditDialog = props.renderImageEditDialog,
    renderCloseDesignEditor = props.renderCloseDesignEditor,
    renderAddVisualElement = props.renderAddVisualElement,
    renderLoader = props.renderLoader,
    renderLicenseNotice = props.renderLicenseNotice,
    customElements = props.customElements,
    visualizationOverlayMode = props.visualizationOverlayMode,
    CanvasProvider = props.CanvasProvider,
    CanvasStateProvider = props.CanvasStateProvider,
    TextEditorStateProvider = props.TextEditorStateProvider,
    Layout = props.Layout,
    PopupArea = props.PopupArea,
    FallbackVisualization = props.FallbackVisualization;
  return /*#__PURE__*/React.createElement(CanvasProvider, null, /*#__PURE__*/React.createElement(Layout, {
    imageOnly: imageOnly,
    isPortraitMode: isPortraitMode,
    renderHeader: function renderHeader(renderProps) {
      return renderProps.width === 'xs' && showDesigner ? function () {
        return /*#__PURE__*/React.createElement("div", null);
      } : _renderHeader();
    },
    fallbackMode: fallbackMode,
    showDesigner: showDesigner,
    visualizationOverlayMode: visualizationOverlayMode,
    renderDesigner: visualizationOverlayMode && function (props) {
      return /*#__PURE__*/React.createElement(FallbackVisualization, {
        fallbackMode: fallbackMode,
        showContent: showDesigner
      }, showDesigner && renderDesigner(_objectSpread({
        visualizationOverlayMode: visualizationOverlayMode
      }, props)));
    },
    renderVisualization: function renderVisualization() {
      return _renderVisualization({
        fullScreenViewProps: {
          Component: _FullScreenView["default"],
          showPreviewButton: !showDesigner
        }
      });
    },
    renderMain: function renderMain(renderProps) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, renderProps.width !== 'xs' && isPortraitMode ? /*#__PURE__*/React.createElement("div", {
        className: renderProps.classes.graphicsEditorWrapper
      }, showProductViewButton && renderCloseGraphicsEditorButton(renderProps), !showDesigner && renderEditDesignButton({
        styledButton: false
      })) : null, renderProps.width === 'xs' ? showDesigner ? renderDesignAreaControlbox(renderProps) : !showProductViewButton && renderEditDesignButton({
        styledButton: false
      }) : null, !fallbackMode && /*#__PURE__*/React.createElement(_DesignerAlignTarget.DesignerAlignTarget, null), !visualizationOverlayMode && /*#__PURE__*/React.createElement(FallbackVisualization, {
        fallbackMode: fallbackMode,
        showContent: showDesigner
      }, showDesigner && renderDesigner()), renderError(), renderAlertMessages(), renderConfirm(), renderSaveConfiguration(), renderSendEmail(), renderPdfDownload(), renderLoadConfiguration(), renderImageEditDialog(), renderProps.width !== 'xs' && showDesigner && is3DvisualMode && renderCloseDesignEditor(), customElements.main);
    },
    renderSidebar: function renderSidebar(renderProps) {
      return /*#__PURE__*/React.createElement(CanvasStateProvider, null, /*#__PURE__*/React.createElement(TextEditorStateProvider, null, /*#__PURE__*/React.createElement(PopupArea, null, renderProps.width !== 'xs' && isPortraitMode ? /*#__PURE__*/React.createElement(_TwoSideBottomBar.TwoSideBottomBar, {
        leftSide: showDesigner && /*#__PURE__*/React.createElement(React.Suspense, {
          fallback: renderDesignerFallback()
        }, renderDesignerSelectionToolbox()),
        rightSide: /*#__PURE__*/React.createElement(React.Fragment, null, renderDesignAreaControlbox(renderProps), renderAmountPrice(props))
      }) : /*#__PURE__*/React.createElement(React.Fragment, null, renderProps.width !== 'xs' ? showDesigner ? /*#__PURE__*/React.createElement(React.Fragment, null, renderCloseGraphicsEditorButton(renderProps), renderDesignAreaControlbox(renderProps)) : /*#__PURE__*/React.createElement(React.Fragment, null, showProductViewButton && renderCloseGraphicsEditorButton(renderProps), renderEditDesignButton({
        styledButton: false
      })) : null, showDesigner ? /*#__PURE__*/React.createElement(React.Suspense, {
        fallback: renderDesignerFallback()
      }, renderDesignerSelectionToolbox(), renderProps.width === 'xs' && /*#__PURE__*/React.createElement(React.Fragment, null, renderAddVisualElement(), is3DvisualMode && renderCloseDesignEditor())) : renderProps.width === 'xs' && props.activeDesignArea && renderEditDesignButton({
        styledButton: true
      }), /*#__PURE__*/React.createElement("div", {
        className: renderProps.classes.toBottom
      }, renderProps.width !== 'xs' ? renderAmountPrice(props) : props.activeDesignArea ? renderCloseGraphicsEditorButton(renderProps) : renderAmountPrice(props))))));
    },
    renderLoader: renderLoader,
    renderLicenseNotice: renderLicenseNotice,
    renderInvalidConfigurationNotice: renderInvalidConfigurationNotice
  }));
}
// eslint-disable-next-line react/prop-types
var renderDesignAreaControlbox = function renderDesignAreaControlbox(_ref) {
  var area = _ref.area;
  return /*#__PURE__*/React.createElement(_DesignAreaControlbox["default"], {
    boxed: area === 'sidebar'
  });
};

// eslint-disable-next-line react/prop-types
var renderEditDesignButton = function renderEditDesignButton(_ref2) {
  var styledButton = _ref2.styledButton;
  return /*#__PURE__*/React.createElement(_EditDesignButton["default"], {
    buttonXS: styledButton
  });
};
DesignerScreen.defaultProps = {
  // Render props
  renderCreator: function renderCreator() {
    return null;
  },
  renderDesigner: function renderDesigner() {
    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      designerClassName = _ref3.designerClassName,
      visualizationOverlayMode = _ref3.visualizationOverlayMode;
    var designer = /*#__PURE__*/React.createElement(_Designer["default"], {
      visualizationOverlayMode: visualizationOverlayMode
    });
    return /*#__PURE__*/React.createElement(React.Suspense, {
      fallback: /*#__PURE__*/React.createElement("div", null, "Loading Designer Component...")
    }, visualizationOverlayMode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DesignerClickAwayListener["default"], null), /*#__PURE__*/React.createElement("div", {
      className: designerClassName
    }, designer)) : designer);
  },
  renderDesignerSelectionToolbox: function renderDesignerSelectionToolbox() {
    return /*#__PURE__*/React.createElement(React.Suspense, {
      fallback: /*#__PURE__*/React.createElement("div", null, "Loading Designer Toolbox...")
    }, /*#__PURE__*/React.createElement(_DesignerSelectionToolbox["default"], null));
  },
  renderHeader: function renderHeader() {
    return /*#__PURE__*/React.createElement(_Header["default"], null);
  },
  renderDesignerFallback: function renderDesignerFallback() {
    return /*#__PURE__*/React.createElement("div", null, "Loading Designer Component...");
  },
  renderCloseGraphicsEditorButton: function renderCloseGraphicsEditorButton() {
    return /*#__PURE__*/React.createElement(_CloseGraphicsEditorButton["default"], null);
  },
  renderImageEditDialog: function renderImageEditDialog() {
    return /*#__PURE__*/React.createElement(_ImageEditDialog["default"], null);
  },
  renderCloseDesignEditor: function renderCloseDesignEditor() {
    return /*#__PURE__*/React.createElement(_CloseDesignEditor["default"], null);
  },
  renderAddVisualElement: function renderAddVisualElement() {
    return /*#__PURE__*/React.createElement(_AddVisualElement["default"], {
      autoHide: true
    });
  },
  renderEditDesignButton: renderEditDesignButton,
  renderDesignAreaControlbox: renderDesignAreaControlbox,
  renderInvalidConfigurationNotice: function renderInvalidConfigurationNotice() {
    return /*#__PURE__*/React.createElement(_InvalidConfigurationNotice["default"], null);
  },
  // Components
  CanvasProvider: _DefaultCanvasProvider.DefaultCanvasProvider,
  CanvasStateProvider: _DefaultCanvasProvider.DefaultCanvasStateProvider,
  TextEditorStateProvider: _DefaultCanvasProvider.DefaultTextEditorStateProvider,
  Layout: _DefaultLayout["default"],
  PopupArea: _PopupAreaProvider.PopupArea
};