"use strict";

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

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

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

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

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

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

var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));

var _ExitToAppRounded = _interopRequireDefault(require("@material-ui/icons/ExitToAppRounded"));

var _ExpandLessRounded = _interopRequireDefault(require("@material-ui/icons/ExpandLessRounded"));

var _FiberManualRecord = _interopRequireDefault(require("@material-ui/icons/FiberManualRecord"));

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

var _IconButton = _interopRequireDefault(require("../elements/buttons/IconButton"));

var _helpers = require("../../helpers");

var useStyles = function useStyles(props) {
  return (0, _styles.makeStyles)(function (theme) {
    return {
      header: {
        position: 'relative',
        height: '30px'
      },
      headerGrid: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      },
      collapsedTitle: {
        flexGrow: 1,
        paddingLeft: theme.spacing(1)
      },
      clickable: {
        cursor: 'pointer'
      },
      statusIcon: {
        width: '10px'
      },
      exitToAppIcon: {
        transform: 'scaleX(-1)',
        verticalAlign: 'middle'
      },
      standardBottomPadding: {
        paddingBottom: theme.spacing(1)
      },
      collapseButton: {
        margin: 'auto',
        display: 'block'
      },
      fullWidth: {
        width: '100%'
      },
      verticalAlignMiddle: {
        verticalAlign: 'middle'
      }
    };
  });
};

function TestTopNavBar(_ref) {
  var children = _ref.children,
      props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
  var classes = useStyles(props)();
  var theme = (0, _styles.useTheme)();
  return /*#__PURE__*/_react.default.createElement(_PageContainer.default, null, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.header
  }, /*#__PURE__*/_react.default.createElement(_core.Fade, {
    in: !props.collapsed
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.headerGrid,
    container: true,
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    onClick: props.exitOnClick
  }, /*#__PURE__*/_react.default.createElement(_ExitToAppRounded.default, {
    className: classes.exitToAppIcon
  }))))), /*#__PURE__*/_react.default.createElement(_core.Fade, {
    in: props.collapsed
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: "".concat(classes.headerGrid, " ").concat(classes.clickable),
    container: true,
    alignItems: "center",
    onClick: function onClick() {
      props.setCollapsed(false);
    }
  }, /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true
  }, /*#__PURE__*/_react.default.createElement(_Menu.default, {
    className: classes.verticalAlignMiddle
  })), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    className: classes.collapsedTitle,
    item: true
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
    variant: "h6"
  }, props.collapsedTitle)), /*#__PURE__*/_react.default.createElement(_core.Grid, {
    item: true
  }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
    variant: "caption"
  }, (0, _helpers.getTextLabelByCorrectness)(props.currentQuestionCorrectness, props.currentQuestionStarted)))))), children ? /*#__PURE__*/_react.default.createElement(_core.Slide, {
    in: !props.collapsed,
    timeout: 100,
    unmountOnExit: true,
    mountOnEnter: true
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Grow, {
    in: !props.collapsed,
    timeout: 50
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Fade, {
    in: !props.collapsed,
    timeout: 50
  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.standardBottomPadding
  }, children), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.fullWidth
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.collapseButton,
    onClick: function onClick() {
      props.setCollapsed(true);
    }
  }, /*#__PURE__*/_react.default.createElement(_ExpandLessRounded.default, null))))))))) : null);
}

TestTopNavBar.defaultTypes = {
  collapsed: false,
  correctness: null,
  setCollapsed: function setCollapsed() {},
  exitOnClick: function exitOnClick() {}
};
var _default = TestTopNavBar;
exports.default = _default;