import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { usersApi, useIsAuthenticated, useUIFunctions, useConfigState, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { TopNavElement } from './TopNavElement';
import { UserIcon } from '../../../Common/Icons';
import { Typography } from '../../../Common';
export var TopNav = (_ref) => {
  var {
    items,
    searchBox,
    profileItems,
    saluteMessage,
    profileHeader,
    languageSelector
  } = _ref;
  var {
    data: userData
  } = usersApi.useGet();
  var {
    isAuthenticated
  } = useIsAuthenticated();
  var {
    enqueueView
  } = useUIFunctions();
  var labels = useGlobalLabels();
  var {
    views
  } = useConfigState();
  return /*#__PURE__*/React.createElement(Container, {
    searchBox: searchBox
  }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Group, null, items.map(item => {
    return /*#__PURE__*/React.createElement(TopNavElement, _extends({
      key: item.url
    }, item, {
      withSeparator: true
    }));
  }), !isAuthenticated && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(TopNavElement, {
    label: labels.buttons.signIn,
    onClick: () => enqueueView(views.auth)
  })), (userData == null ? void 0 : userData.email) && isAuthenticated && /*#__PURE__*/React.createElement(TopNavElement, {
    url: "/profile",
    header: profileHeader,
    label: saluteMessage.replace(':name', (userData == null ? void 0 : userData.firstName) || (userData == null ? void 0 : userData.email)),
    icon: UserIcon,
    menuItems: profileItems
  }))), /*#__PURE__*/React.createElement(Language, {
    style: {
      backgroundImage: "url(" + languageSelector.options[0].icon + ")"
    }
  }));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.searchBox ? '5' : '3500', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Group = styled.ul.attrs({
  className: 'd-flex align-items-center pr-4 mr-lg-3 pr-lg-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  list-style: none;\n"])));
var Wrapper = styled(Typography).attrs({
  variant: 6,
  as: 'div',
  className: 'mx-auto'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-width: 1908px;\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  position: relative;\n"])));
var Language = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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