"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Theme = exports.LAYOUT_TYPES = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Navigation = _interopRequireWildcard(require("../Navigation"));

var _ProductFooter = _interopRequireWildcard(require("../ProductFooter"));

var _Pattern = _interopRequireDefault(require("../Pattern"));

var _Button = _interopRequireDefault(require("../../controls/Button/Button"));

var _OneColumnLayout = _interopRequireDefault(require("./OneColumnLayout"));

var _TwoColumnLayout = _interopRequireDefault(require("./TwoColumnLayout"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var LAYOUT_TYPES = {
  ONE_COLUMN: 'one-column',
  TWO_COLUMN: 'two-column',
  TWO_COLUMN_FLEXIBLE: 'two-column-flexible'
};
exports.LAYOUT_TYPES = LAYOUT_TYPES;
var Theme = {
  backgroundColor: _propTypes["default"].string,
  backgroundImage: _propTypes["default"].shape({
    url: _propTypes["default"].string
  }),
  backgroundTiling: _propTypes["default"].bool
};
exports.Theme = Theme;

var PageLayout = function PageLayout(_ref) {
  var header = _ref.header,
      theme = _ref.theme,
      footer = _ref.footer,
      children = _ref.children,
      actions = _ref.actions,
      layoutType = _ref.layoutType,
      schedexColorTheme = _ref.schedexColorTheme;
  var backgroundImage = theme.backgroundImage,
      backgroundTiling = theme.backgroundTiling,
      backgroundColor = theme.backgroundColor;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout PageLayout--".concat(layoutType)
  }, schedexColorTheme && /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__BrandingTheme",
    style: {
      backgroundColor: schedexColorTheme
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__header"
  }, /*#__PURE__*/_react["default"].createElement(_Navigation["default"], header)), /*#__PURE__*/_react["default"].createElement(_Pattern["default"], {
    backgroundImage: backgroundImage.url,
    repeat: backgroundTiling,
    color: backgroundColor
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__content"
  }, children), footer && /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__footer"
  }, /*#__PURE__*/_react["default"].createElement(_ProductFooter["default"], footer))), Array.isArray(actions) && actions.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__action-bar"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__actions-wrapper"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "PageLayout__actions"
  }, actions.map(function (action, index) {
    return (
      /*#__PURE__*/
      // We do not expect new action props after first render, so it's fine to use index
      // eslint-disable-next-line react/no-array-index-key
      _react["default"].createElement("div", {
        key: index,
        className: "PageLayout__action"
      }, action)
    );
  })))));
};

function validateChildren(props, propName, componentName) {
  var children = _react["default"].Children.toArray(props[propName]);

  var invalidType = children.find(function (child) {
    return child.type !== _OneColumnLayout["default"] && child.type !== _TwoColumnLayout["default"];
  });
  return invalidType ? new TypeError("`".concat(componentName, "` children should be of type `OneColumnLayout` or  `TwoColumnLayout`. Are you only setting the layoutType? Please note that the layoutType prop only affects the width of the header and the action bar.")) : '';
}

validateChildren.isRequired = function (props, propName, componentName) {
  var children = _react["default"].Children.toArray(props[propName]);

  if (children.length === 0) {
    return new TypeError("`".concat(componentName, "` children prop is required."));
  }

  return validateChildren(props, propName, componentName);
};

PageLayout.propTypes = {
  /**
   * Props to be passed to the Navigation component
   * @todo bug with passed PropTypes, so have to ignore it for styleguide
   * https://github.com/reactjs/react-docgen/pull/352
   * @ignore
   * */
  header: _propTypes["default"].shape(_Navigation.NavigationTypes).isRequired,

  /**
   * Props to be passed to the ProductFooter component
   * @todo bug with passed PropTypes, so have to ignore it for styleguide
   * https://github.com/reactjs/react-docgen/pull/352
   * @ignore
   */
  footer: _propTypes["default"].shape(_ProductFooter.ProductFooterTypes),

  /** Content that is either a OneColumnLayout or TwoColumnLayout component */
  children: validateChildren.isRequired,

  /** An array of Buttons to be rendered in the action bar. If none are provided, action bar won't be rendered */
  actions: _propTypes["default"].array,

  /**
   * A control to make header and action bar, same width as the content, which depends on children passed
   *
   * Please note that the layoutType prop only affects the width of the header and the action bar.
   * Make sure you add OneColumnLayout or TwoColumnLayout components as children.
   */
  layoutType: _propTypes["default"].oneOf(Object.values(LAYOUT_TYPES)).isRequired,

  /**
   * An object representing the theme settings to be used as background.
   */
  theme: _propTypes["default"].shape(Theme),

  /**
   * Enable SchedEx color theme.
   * Show branding colored tile on top instead of background.
   */
  schedexColorTheme: _propTypes["default"].string
};
PageLayout.defaultProps = {
  actions: null,
  footer: null,
  theme: {
    backgroundImage: {
      url: null
    }
  },
  schedexColorTheme: null
};
var _default = PageLayout;
exports["default"] = _default;