"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BottomNavBar = BottomNavBar;
exports.default = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

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

var _core = require("@material-ui/core");

var _styles = require("@material-ui/core/styles");

var _Surface = _interopRequireDefault(require("../layout/Surface"));

var _PageContainer = _interopRequireDefault(require("../layout/PageContainer"));

var useStyles = function useStyles(props) {
  return (0, _styles.makeStyles)(function (theme) {
    return {
      root: {
        position: 'fixed',
        zIndex: '999',
        left: '0',
        bottom: '0',
        width: '100%'
      }
    };
  });
};

function BottomNavBar(_ref) {
  var children = _ref.children,
      props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
  var classes = useStyles(props)();
  return /*#__PURE__*/_react.default.createElement(_Surface.default, {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_PageContainer.default, null, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    container: true,
    direction: "column",
    spacing: 1
  }, children ? /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true
  }, children) : null, props.userInput ? /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true
  }, props.userInput) : null, props.controls ? /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true
  }, props.controls) : null)));
}

var _default = BottomNavBar;
exports.default = _default;