"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, _horizontal, _withBottomList, _outerContainer, _withBottomList2, _visualization;
  return {
    root: {
      display: 'flex',
      flexDirection: 'column',
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      overflowX: 'hidden',
      overflowY: 'hidden',
      '&$fallbackMode': {
        '& $main': (_$main = {}, _defineProperty(_$main, theme.breakpoints.up('md'), {
          width: '100%'
        }), _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: {
      zIndex: 1
    },
    container: (_container = {
      flex: 1,
      display: 'flex',
      flexDirection: 'row',
      position: 'relative'
    }, _defineProperty(_container, theme.breakpoints.down('xs'), {
      flexDirection: 'column'
    }), _defineProperty(_container, '&.fullSize', {
      width: '100%',
      height: '100%',
      paddingLeft: 0
    }), _defineProperty(_container, '&.reducedSize', {
      width: 'calc(100% - 140px)',
      marginLeft: 140
    }), _defineProperty(_container, '&.fullScreen', {
      width: '100%',
      height: '100%',
      marginLeft: 0
    }), _defineProperty(_container, theme.breakpoints.between('xs', theme.creator.viewSelectBreakpoint), {
      height: 'calc(100% - 136px)'
    }), _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
    },

    productsList: {
      position: 'absolute',
      '&.horizontal': (_horizontal = {
        bottom: 2
      }, _defineProperty(_horizontal, theme.breakpoints.down('xs'), {
        width: '100%',
        left: 0,
        bottom: 88
      }), _defineProperty(_horizontal, theme.breakpoints.up('sm'), {
        width: 'calc(100% - 370px)',
        minWidth: 215,
        marginBottom: 0
      }), _horizontal),
      '&.vertical': {
        "float": 'left',
        height: 'calc(100% - 68px)',
        minHeight: 120,
        width: 140,
        left: theme.spacing(1),
        top: theme.spacing(1)
      }
    },
    shoppingCart: {
      display: 'block'
    },
    outerContainer: (_outerContainer = {
      height: '100%',
      position: 'relative',
      flex: 1,
      display: 'flex',
      marginRight: 20
    }, _defineProperty(_outerContainer, theme.breakpoints.up('md'), {
      marginBottom: 24
    }), _defineProperty(_outerContainer, theme.breakpoints.down('md'), {
      marginBottom: 16
    }), _defineProperty(_outerContainer, theme.breakpoints.down('xs'), {
      margin: 16
    }), _defineProperty(_outerContainer, '&.withBottomList', (_withBottomList = {}, _defineProperty(_withBottomList, theme.breakpoints.down('xs'), {
      height: 'calc(100% - 36px)'
    }), _defineProperty(_withBottomList, '& .dots-container', _defineProperty({
      bottom: 0
    }, theme.breakpoints.down('xs'), {
      bottom: -16
    })), _withBottomList)), _outerContainer),
    visualization: (_visualization = {
      // the visualization is in the background with absolute positioning
      position: 'absolute',
      width: '100%',
      height: '100%'
    }, _defineProperty(_visualization, theme.breakpoints.down('xs'), {
      height: '75%'
    }), _defineProperty(_visualization, theme.breakpoints.down(theme.creator.viewSelectBreakpoint), {
      height: 'calc(100% - 18px)'
    }), _defineProperty(_visualization, '&.withBottomList', (_withBottomList2 = {}, _defineProperty(_withBottomList2, theme.breakpoints.between('xs', 'sm'), {
      height: 'calc(100% - 198px)'
    }), _defineProperty(_withBottomList2, theme.breakpoints.up('sm'), {
      height: 'calc(100% - 152px)'
    }), _withBottomList2)), _defineProperty(_visualization, '&.fullScreen', {
      height: '100%'
    }), _visualization)
  };
};
var DefaultLayout = function DefaultLayout(_ref) {
  var width = _ref.width,
    classes = _ref.classes,
    renderHeader = _ref.renderHeader,
    renderMain = _ref.renderMain,
    renderInForeground = _ref.renderInForeground,
    renderProductsList = _ref.renderProductsList,
    renderShoppingCart = _ref.renderShoppingCart,
    renderVisualization = _ref.renderVisualization,
    renderLoader = _ref.renderLoader,
    renderLicenseNotice = _ref.renderLicenseNotice,
    renderInvalidConfigurationNotice = _ref.renderInvalidConfigurationNotice,
    fallbackMode = _ref.fallbackMode,
    isPortraitMode = _ref.isPortraitMode,
    displayVerticalList = _ref.displayVerticalList,
    imageOnly = _ref.imageOnly;
  var content = imageOnly ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.outerContainer, !displayVerticalList && 'withBottomList')
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.container, "  ").concat(imageOnly ? 'fullScreen' : '', " ").concat(isPortraitMode ? classes.containerTabletPortrait : '', " ").concat(displayVerticalList ? 'reducedSize' : 'fullSize')
  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.visualization, " ").concat(imageOnly ? 'fullScreen' : '', " ").concat(displayVerticalList ? '' : 'withBottomList')
  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.main
  }, renderMain({
    area: 'main',
    width: width,
    classes: classes
  }))))) : renderInForeground() || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderLicenseNotice({
    mobileOffset: 110
  }), renderInvalidConfigurationNotice(), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.header
  }, renderHeader({
    area: 'header',
    width: width,
    classes: classes
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.outerContainer, !displayVerticalList && 'withBottomList')
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.productsList, " ").concat(displayVerticalList ? 'vertical' : 'horizontal')
  }, renderProductsList({
    area: 'products',
    width: width,
    classes: classes,
    displayVerticalList: displayVerticalList
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.container, " ").concat(isPortraitMode ? classes.containerTabletPortrait : '', " ").concat(displayVerticalList ? 'reducedSize' : 'fullSize')
  }, !fallbackMode && /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.visualization, " ").concat(displayVerticalList ? '' : 'withBottomList')
  }, renderVisualization()), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.main
  }, renderMain({
    area: 'main',
    width: width,
    classes: classes
  }))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.shoppingCart
  }, renderShoppingCart({
    area: 'cart',
    width: width,
    classes: classes
  }))));
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
  }, content, renderLoader());
};
var getDefaultComponent = function getDefaultComponent() {
  return null;
};
DefaultLayout.defaultProps = {
  renderHeader: getDefaultComponent,
  renderLoader: getDefaultComponent,
  renderMain: getDefaultComponent,
  renderInForeground: getDefaultComponent,
  renderProductsList: getDefaultComponent,
  renderShoppingCart: getDefaultComponent,
  renderVisualization: getDefaultComponent,
  displayVerticalList: true
};
var _default = exports["default"] = (0, _styles.withStyles)(styles, {
  name: 'DefaultLayout'
})((0, _withWidth["default"])({
  initialWidth: 'xl'
})(DefaultLayout));