"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("@material-ui/core/styles");
var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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 _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); }
var styles = function styles(theme) {
  var _$main, _container, _designer;
  return {
    root: {
      display: 'flex',
      flexDirection: 'column',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      overflowX: 'hidden',
      '&$fallbackMode': {
        '& $main': (_$main = {}, _defineProperty(_$main, theme.breakpoints.up('md'), {
          width: "calc(100% - ".concat(theme.layout.sidebar.width, "px)")
        }), _defineProperty(_$main, '@media (orientation: landscape)', {
          flexDirection: 'row'
        }), _$main)
      },
      // helper classes can be used on contained elements
      '& .noShrink': {
        flexShrink: 0
      },
      '& .verticalSpacing': {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
      },
      '& .md': _defineProperty({}, theme.breakpoints.up('md'), {}),
      '& .sm': _defineProperty({}, theme.breakpoints.down('sm'), {})
    },
    fallbackMode: {},
    header: {},
    container: (_container = {
      flex: 1,
      display: 'flex',
      flexDirection: 'row'
    }, _defineProperty(_container, theme.breakpoints.up('md'), {
      margin: '8px 20px 24px 8px'
    }), _defineProperty(_container, theme.breakpoints.down('md'), {
      margin: '8px 20px 16px 8px'
    }), _defineProperty(_container, theme.breakpoints.down('xs'), {
      flexDirection: 'column',
      margin: theme.smallScreen.padding
    }), _defineProperty(_container, "position", 'relative'), _container),
    containerTabletPortrait: {
      flexDirection: 'column'
    },
    main: {
      flex: 1,
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      // the pointer events should be passed through to the visualization component
      pointerEvents: 'none' // important: don't remove this
    },

    sidebar: function sidebar(_ref) {
      var _ref2;
      var isPortraitMode = _ref.isPortraitMode;
      return _ref2 = {
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        marginTop: theme.spacing(1),
        width: !isPortraitMode ? theme.layout.sidebar.width : ''
      }, _defineProperty(_ref2, theme.breakpoints.up('sm'), {
        marginTop: 0,
        marginLeft: theme.spacing(1)
      }), _defineProperty(_ref2, theme.breakpoints.down('xs'), {
        maxWidth: 'none'
      }), _defineProperty(_ref2, '& > *', {
        // make the components in the sidebar overlap the visualization
        zIndex: 1
      }), _defineProperty(_ref2, "pointerEvents", 'none'), _ref2;
    },
    visualization: _defineProperty({
      // the visualization is in the background with absolute positioning
      position: 'absolute',
      width: '100%',
      height: '100%'
    }, theme.breakpoints.down('xs'), {
      height: 'calc(100% - 156px)',
      top: 69
    }),
    visualizationOverlay: {
      pointerEvents: 'none',
      zIndex: 1
    },
    designer: (_designer = {
      position: 'absolute',
      width: '100%',
      height: 'calc(100% - 342px)',
      display: 'flex',
      pointerEvents: 'none',
      top: 60
    }, _defineProperty(_designer, theme.breakpoints.up('sm'), {
      top: 0
    }), _defineProperty(_designer, theme.orientation.landscape, {
      width: 'calc(100% - 366px)',
      height: 'calc(100% - 150px)',
      top: 0
    }), _designer),
    toBottom: {
      marginTop: 'auto'
    },
    overlayContainer: _defineProperty({
      position: 'absolute',
      height: '100%',
      zIndex: 1
    }, theme.breakpoints.down('xs'), {
      position: 'absolute'
    }),
    graphicsEditorWrapper: {
      maxWidth: theme.layout.sidebar.width,
      width: '100%',
      marginLeft: 'auto',
      marginRight: '0'
    }
  };
};
var DefaultLayout = function DefaultLayout(_ref3) {
  var width = _ref3.width,
    classes = _ref3.classes,
    renderHeader = _ref3.renderHeader,
    renderMain = _ref3.renderMain,
    renderSidebar = _ref3.renderSidebar,
    renderVisualization = _ref3.renderVisualization,
    renderLoader = _ref3.renderLoader,
    renderLicenseNotice = _ref3.renderLicenseNotice,
    fallbackMode = _ref3.fallbackMode,
    isPortraitMode = _ref3.isPortraitMode,
    imageOnly = _ref3.imageOnly,
    renderDesigner = _ref3.renderDesigner,
    showDesigner = _ref3.showDesigner,
    visualizationOverlayMode = _ref3.visualizationOverlayMode,
    renderInvalidConfigurationNotice = _ref3.renderInvalidConfigurationNotice;
  return imageOnly ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '')
  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.visualization
  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.main
  }, renderMain({
    area: 'main',
    width: width,
    classes: classes
  }))), renderLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
  }, renderLicenseNotice(), renderInvalidConfigurationNotice(), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.header
  }, renderHeader({
    area: 'header',
    width: width,
    classes: classes
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '')
  }, renderDesigner && renderDesigner({
    designerClassName: classes.designer
  }), !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.visualization, showDesigner && visualizationOverlayMode && classes.visualizationOverlay)
  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.main
  }, renderMain({
    area: 'main',
    width: width,
    classes: classes
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.sidebar
  }, renderSidebar({
    area: 'sidebar',
    width: width,
    classes: classes
  }))), renderLoader());
};
var _default = exports["default"] = (0, _styles.withStyles)(styles, {
  name: 'DefaultLayout'
})((0, _withWidth["default"])({
  initialWidth: 'xl'
})(DefaultLayout));