"use strict";

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

var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.NAV_ANIMATION = exports.NAV_HEIGHT_WITH_VOUCHER = exports.NAV_HEIGHT = exports.Navbar = void 0;

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

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

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

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

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

var _dynamic = _interopRequireDefault(require("next/dynamic"));

var _Components = require("./Components");

var _navbar = require("./navbar.props");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

var SearchBox = (0, _dynamic["default"])(function () {
  return Promise.resolve().then(function () {
    return (0, _interopRequireWildcard2["default"])(require('@sentecacommerce-theme/lib'));
  }).then(function (mod) {
    return mod.SearchBox;
  });
});
var MobileMenu = (0, _dynamic["default"])(function () {
  return Promise.resolve().then(function () {
    return (0, _interopRequireWildcard2["default"])(require('./Components/MobileMenu'));
  }).then(function (mod) {
    return mod.MobileMenu;
  });
}); // TODO show navigation on scroll top and hide it on scroll down

var Navbar = function Navbar(props) {
  var topNavStrip = props.topNavStrip,
      searchBox = props.searchBox,
      vouchers = props.vouchers,
      defaultFeaturedBrandsImage = props.defaultFeaturedBrandsImage,
      labels = props.labels,
      isInverted = props.isInverted,
      mobileMenu = props.mobileMenu;

  var _useState = (0, _react.useState)(false),
      isMobileMenuOpen = _useState[0],
      setMobileMenuOpen = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      isSearchBoxOpen = _useState2[0],
      setIsSearchBoxOpen = _useState2[1];

  var containerRef = (0, _react.useRef)(null);
  var displayNav = (0, _lib.useToggleNavbarOnScroll)();

  var _useMenuQuery = (0, _lib.useMenuQuery)(),
      data = _useMenuQuery.data;

  var _usePromoCode = (0, _lib.usePromoCode)(),
      hasActiveVoucher = _usePromoCode.hasActiveVoucher;

  (0, _react.useEffect)(function () {
    var onScroll = function onScroll() {
      if (!containerRef.current) return;

      if (window.scrollY < 5) {
        containerRef.current.dataset.scrolledTop = 'true';
        return;
      }

      containerRef.current.dataset.scrolledTop = 'false';
    };

    window.addEventListener('scroll', onScroll);
    return function () {
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

  var _React$useState = _react["default"].useState(''),
      value = _React$useState[0],
      setValue = _React$useState[1];

  var _useSearchbar = (0, _lib.useSearchbar)({
    onSearchSubmitCallback: function onSearchSubmitCallback() {
      handleSearchBoxClose();
    },
    limit: searchBox.bottomMenu === _navbar.BottomMenuEnum.moreProducts ? 9 : 6
  }),
      inputRef = _useSearchbar.inputRef,
      onInputChange = _useSearchbar.onInputChange,
      suggestions = _useSearchbar.suggestions,
      completionTerm = _useSearchbar.completionTerm,
      handleKeyPress = _useSearchbar.handleKeyPress,
      isLoading = _useSearchbar.isLoading,
      clearResult = _useSearchbar.clearResult,
      suggestedBrands = _useSearchbar.suggestedBrands,
      suggestedCategories = _useSearchbar.suggestedCategories,
      _onSearchSubmit = _useSearchbar.onSearchSubmit;

  var handleClearResult = function handleClearResult() {
    clearResult();
    setValue('');
  };

  var handleSearchBoxClose = function handleSearchBoxClose() {
    setIsSearchBoxOpen(false);
  };

  return /*#__PURE__*/_react["default"].createElement(_lib.LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/_react["default"].createElement(Placeholder, {
    withVoucher: !hasActiveVoucher,
    isInverted: isInverted
  }, isSearchBoxOpen && /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null), isSearchBoxOpen && /*#__PURE__*/_react["default"].createElement(Overlay, {
    onClick: handleSearchBoxClose
  }), /*#__PURE__*/_react["default"].createElement(NavContainer, {
    "data-scrolled-top": "true",
    displayNav: displayNav,
    ref: containerRef,
    withVoucher: !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(_Components.TopNav, (0, _extends2["default"])({}, topNavStrip, {
    searchBox: isSearchBoxOpen
  })), /*#__PURE__*/_react["default"].createElement(_Components.VouchersCTA, {
    labels: vouchers
  }), /*#__PURE__*/_react["default"].createElement(NavBoxContainer, {
    "data-pull-up": isSearchBoxOpen,
    "data-with-voucher": !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(NavBoxWrapper, null, /*#__PURE__*/_react["default"].createElement(LogoWrapper, {
    searchIsOpen: isSearchBoxOpen
  }, /*#__PURE__*/_react["default"].createElement(_Components.Logo, {
    pushDown: isSearchBoxOpen
  })), /*#__PURE__*/_react["default"].createElement(NavBoxInner, {
    "data-is-active": isSearchBoxOpen
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Components.DesktopMenu, {
    defaultFeaturedBrandsImage: defaultFeaturedBrandsImage,
    data: data == null ? void 0 : data.results
  }), isMobileMenuOpen && /*#__PURE__*/_react["default"].createElement(MobileMenu, {
    data: data == null ? void 0 : data.results,
    isOpen: isMobileMenuOpen,
    handleClose: function handleClose() {
      return setMobileMenuOpen(false);
    },
    mobileMenu: mobileMenu
  }), /*#__PURE__*/_react["default"].createElement(_Components.SearchBar, {
    onSearchSubmit: function onSearchSubmit(e) {
      return _onSearchSubmit(e);
    },
    inputRef: inputRef,
    value: value,
    onChange: function onChange(e) {
      onInputChange(e);
      setValue(e.target.value);
    },
    onKeyDown: function onKeyDown(e) {
      handleKeyPress(e);
      setValue(e.target.value);
    },
    isSearchBoxOpen: isSearchBoxOpen,
    handleSearchBox: setIsSearchBoxOpen,
    onClearResult: handleClearResult,
    completionTerm: completionTerm
  }))), /*#__PURE__*/_react["default"].createElement(_Components.CTAButtons, {
    handleMobileMenu: function handleMobileMenu() {
      return setMobileMenuOpen(!isMobileMenuOpen);
    },
    handleSearchBox: setIsSearchBoxOpen
  }), isSearchBoxOpen && /*#__PURE__*/_react["default"].createElement(SearchBox, (0, _extends2["default"])({
    isLoading: isLoading,
    suggestedBrands: suggestedBrands,
    suggestedCategories: suggestedCategories,
    suggestions: suggestions,
    searchValue: value,
    onClose: handleSearchBoxClose,
    onSearchSubmit: function onSearchSubmit(e) {
      return _onSearchSubmit(e);
    },
    closeButtonOnTop: true,
    hasPopularSearches: true
  }, searchBox)))), /*#__PURE__*/_react["default"].createElement(_Components.VouchersCTA, {
    labels: vouchers,
    mobile: true
  }))));
};

exports.Navbar = Navbar;
var NAV_HEIGHT = '6rem';
exports.NAV_HEIGHT = NAV_HEIGHT;
var NAV_HEIGHT_WITH_VOUCHER = '10.5rem';
exports.NAV_HEIGHT_WITH_VOUCHER = NAV_HEIGHT_WITH_VOUCHER;
var NAV_ANIMATION = '0.15s cubic-bezier(0.4, 0, 0.2, 1)';
exports.NAV_ANIMATION = NAV_ANIMATION;
var TOP_NAV_HEIGHT = '3.7rem';

var Placeholder = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  --menu-background: ", ";\n\n  --menu-color: ", ";\n\n  --top-menu-background: ", ";\n\n  --top-menu-color: ", ";\n\n  position: relative;\n  transition: height 0.3s ease;\n\n  height: ", ";\n  @media (min-width: ", ") {\n    height: ", ";\n  }\n"])), function (props) {
  return props.isInverted ? props.theme.palette.primary : props.theme.palette.secondary;
}, function (props) {
  return props.isInverted ? props.theme.palette.secondary : props.theme.palette.primary;
}, function (props) {
  return props.isInverted ? props.theme.palette.secondary : props.theme.palette.disabled;
}, function (props) {
  return props.isInverted ? props.theme.palette.primary : props.theme.palette.primary;
}, function (props) {
  return props.withVoucher ? "calc(" + NAV_HEIGHT + " + 4.5rem)" : "" + NAV_HEIGHT;
}, function (_ref) {
  var theme = _ref.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.withVoucher ? "calc(" + NAV_HEIGHT + " + " + TOP_NAV_HEIGHT + " + 4.5rem)" : "calc(" + NAV_HEIGHT + " + " + TOP_NAV_HEIGHT + ")";
});

var Overlay = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  z-index: 100;\n\n  opacity: 1;\n  visibility: visible;\n  transition: opacity 0.8s ease, visibility 0s;\n  background-color: hsla(0, 0%, 7%, 0.36);\n"])));

var LogoWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    opacity: ", ";\n    position: absolute;\n    left: 0;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  return props.searchIsOpen ? '0' : '1';
});

var NavBoxWrapper = _styledComponents["default"].div.attrs({
  className: 'mx-auto d-flex'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 192rem;\n  padding: 0 7rem;\n\n  @media (max-width: ", ") {\n    padding: 0 6rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.xl.max;
});

var NavContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n\n  transform: ", ";\n\n  transition: transform ", ";\n  z-index: 100;\n\n  @media only screen and (min-width: ", ") {\n    transform: ", ";\n    &[data-scrolled-top='true'] {\n      transform: translateY(0) !important;\n    }\n  }\n"])), function (props) {
  if (props.displayNav) return 'translateY(0)';

  if (props.withVoucher) {
    return "translateY(-" + NAV_HEIGHT_WITH_VOUCHER + ")";
  }

  return "translateY(-" + NAV_HEIGHT + ")";
}, NAV_ANIMATION, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.displayNav ? "translateY(-" + TOP_NAV_HEIGHT + ")" : props.withVoucher ? "translateY(-14.2rem)" : "translateY(-9.7rem)";
});

var NavBoxContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: var(--menu-background);\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 6rem;\n  width: 100%;\n  transition: transform 0.15s ease;\n  display: block;\n  z-index: 3000;\n\n  /* Pull up (as a class) is applied every time the search box is active but takes effect\n    only if data-scrolled-top is true  */\n  &[data-pull-up='true'] {\n    @media (min-width: ", ") {\n      transition: transform 0.25s ease 0.25s;\n      [data-scrolled-top='true'] & {\n        transform: translateY(-4rem);\n      }\n\n      &[data-with-voucher='true'] {\n        [data-scrolled-top='true'] & {\n          transform: translateY(-8.5rem);\n        }\n        transform: translateY(-4.5rem);\n      }\n    }\n  }\n\n  @media only screen and (min-width: ", ") {\n    position: relative;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.lg.min;
});

var NavBoxInner = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  bottom: 0;\n  width: 100%;\n  right: 4.4rem;\n  position: absolute;\n  top: 0;\n  flex-grow: 1;\n\n  @media only screen and (min-width: ", ") {\n    position: unset;\n    bottom: inherit;\n    top: 0;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=navbar.component.js.map