"use strict";

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

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

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

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

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

var _router = require("next/router");

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

var _profile = require("../../../profile.context");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var NavigationItem = function NavigationItem(_ref) {
  var label = _ref.label,
      url = _ref.url;
  var router = (0, _router.useRouter)();
  var dispatch = (0, _profile.useProfileDispatch)();
  var logout = (0, _lib.useLogout)();

  var handleClick = function handleClick(e) {
    if (url === 'logout') {
      e.preventDefault();
      logout();
      return router.push('/');
    }

    dispatch({
      type: 'change',
      payload: url.replace('#', '')
    });
  };

  return /*#__PURE__*/_react["default"].createElement(Container, {
    onClick: handleClick
  }, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Inner, null, label), /*#__PURE__*/_react["default"].createElement(MobileArrow, null, /*#__PURE__*/_react["default"].createElement(ButtonSvg, {
    viewBox: "0 0 238.003 238.003"
  }, /*#__PURE__*/_react["default"].createElement("path", {
    d: "M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"
  })))));
};

exports.NavigationItem = NavigationItem;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  box-shadow: inset 0 -1px 0 0 ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.light;
});

var Wrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  align-items: center;\n  display: flex;\n  cursor: pointer;\n  height: 44px;\n  position: relative;\n"])));

var Inner = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: calc(100% - 32px);\n  line-height: 44px;\n  display: inline-block;\n\n  &:hover {\n    opacity: 0.5;\n  }\n"])));

var MobileArrow = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 15px;\n  right: 0;\n  text-align: center;\n"])));

var ButtonSvg = _styledComponents["default"].svg(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 1.3rem;\n  height: 1.3rem;\n  display: block;\n\n  @media only screen and (min-width: ", ") {\n    display: none;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map