"use strict";

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

exports.__esModule = true;
exports.TopNav = void 0;

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

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _TopNavElement = require("./TopNavElement");

var _Icons = require("../../../Common/Icons");

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var TopNav = function TopNav(_ref) {
  var items = _ref.items,
      searchBox = _ref.searchBox,
      profileItems = _ref.profileItems,
      saluteMessage = _ref.saluteMessage,
      profileHeader = _ref.profileHeader,
      languageSelector = _ref.languageSelector;

  var _usersApi$useGet = _lib.usersApi.useGet(),
      userData = _usersApi$useGet.data;

  var _useIsAuthenticated = (0, _lib.useIsAuthenticated)(),
      isAuthenticated = _useIsAuthenticated.isAuthenticated;

  var _useUIFunctions = (0, _lib.useUIFunctions)(),
      enqueueView = _useUIFunctions.enqueueView;

  var labels = (0, _lib.useGlobalLabels)();

  var _useConfigState = (0, _lib.useConfigState)(),
      views = _useConfigState.views;

  return /*#__PURE__*/_react["default"].createElement(Container, {
    searchBox: searchBox
  }, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Group, null, items.map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(_TopNavElement.TopNavElement, (0, _extends2["default"])({
      key: item.url
    }, item, {
      withSeparator: true
    }));
  }), !isAuthenticated && /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_TopNavElement.TopNavElement, {
    label: labels.buttons.signIn,
    onClick: function onClick() {
      return enqueueView(views.auth);
    }
  })), (userData == null ? void 0 : userData.email) && isAuthenticated && /*#__PURE__*/_react["default"].createElement(_TopNavElement.TopNavElement, {
    url: "/profile",
    header: profileHeader,
    label: saluteMessage.replace(':name', (userData == null ? void 0 : userData.firstName) || (userData == null ? void 0 : userData.email)),
    icon: _Icons.UserIcon,
    menuItems: profileItems
  }))), /*#__PURE__*/_react["default"].createElement(Language, {
    style: {
      backgroundImage: "url(" + languageSelector.options[0].icon + ")"
    }
  }));
};

exports.TopNav = TopNav;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  background: var(--top-menu-background);\n  width: 100%;\n  z-index: ", ";\n  display: none;\n  @media only screen and (min-width: ", ") {\n    display: block;\n    padding: 0 7rem;\n  }\n"])), function (props) {
  return props.searchBox ? '5' : '3500';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Group = _styledComponents["default"].ul.attrs({
  className: 'd-flex align-items-center pr-4 mr-lg-3 pr-lg-3'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  list-style: none;\n"])));

var Wrapper = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 6,
  as: 'div',
  className: 'mx-auto'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 1908px;\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  position: relative;\n"])));

var Language = _styledComponents["default"].p(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  background-size: cover;\n  background-position: center center;\n  cursor: pointer;\n  margin-left: 1.6rem;\n\n  position: absolute;\n  right: 2.4rem;\n  top: 1rem;\n"])));
//# sourceMappingURL=index.js.map