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

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

import React, { useState, useEffect, useRef } from 'react';
import styled from 'styled-components';
import dynamic from 'next/dynamic';
import { DesktopMenu, CTAButtons, Logo, TopNav, VouchersCTA, SearchBar } from './Components';
import { BottomMenuEnum } from './navbar.props';
import { useSearchbar, OverflowHidden, usePromoCode, LocalLabelsProvider, useMenuQuery, useToggleNavbarOnScroll } from '@sentecacommerce-theme/lib';
var SearchBox = dynamic(() => import('@sentecacommerce-theme/lib').then(mod => mod.SearchBox));
var MobileMenu = dynamic(() => import('./Components/MobileMenu').then(mod => mod.MobileMenu)); // TODO show navigation on scroll top and hide it on scroll down

export var Navbar = props => {
  var {
    topNavStrip,
    searchBox,
    vouchers,
    defaultFeaturedBrandsImage,
    labels,
    isInverted,
    mobileMenu
  } = props;
  var [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
  var [isSearchBoxOpen, setIsSearchBoxOpen] = useState(false);
  var containerRef = useRef(null);
  var displayNav = useToggleNavbarOnScroll();
  var {
    data
  } = useMenuQuery();
  var {
    hasActiveVoucher
  } = usePromoCode();
  useEffect(() => {
    var 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 () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, []);
  var [value, setValue] = React.useState('');
  var {
    inputRef,
    onInputChange,
    suggestions,
    completionTerm,
    handleKeyPress,
    isLoading,
    clearResult,
    suggestedBrands,
    suggestedCategories,
    onSearchSubmit: _onSearchSubmit
  } = useSearchbar({
    onSearchSubmitCallback: () => {
      handleSearchBoxClose();
    },
    limit: searchBox.bottomMenu === BottomMenuEnum.moreProducts ? 9 : 6
  });

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

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

  return /*#__PURE__*/React.createElement(LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/React.createElement(Placeholder, {
    withVoucher: !hasActiveVoucher,
    isInverted: isInverted
  }, isSearchBoxOpen && /*#__PURE__*/React.createElement(OverflowHidden, null), isSearchBoxOpen && /*#__PURE__*/React.createElement(Overlay, {
    onClick: handleSearchBoxClose
  }), /*#__PURE__*/React.createElement(NavContainer, {
    "data-scrolled-top": "true",
    displayNav: displayNav,
    ref: containerRef,
    withVoucher: !hasActiveVoucher
  }, /*#__PURE__*/React.createElement(TopNav, _extends({}, topNavStrip, {
    searchBox: isSearchBoxOpen
  })), /*#__PURE__*/React.createElement(VouchersCTA, {
    labels: vouchers
  }), /*#__PURE__*/React.createElement(NavBoxContainer, {
    "data-pull-up": isSearchBoxOpen,
    "data-with-voucher": !hasActiveVoucher
  }, /*#__PURE__*/React.createElement(NavBoxWrapper, null, /*#__PURE__*/React.createElement(LogoWrapper, {
    searchIsOpen: isSearchBoxOpen
  }, /*#__PURE__*/React.createElement(Logo, {
    pushDown: isSearchBoxOpen
  })), /*#__PURE__*/React.createElement(NavBoxInner, {
    "data-is-active": isSearchBoxOpen
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DesktopMenu, {
    defaultFeaturedBrandsImage: defaultFeaturedBrandsImage,
    data: data
  }), isMobileMenuOpen && /*#__PURE__*/React.createElement(MobileMenu, {
    data: data,
    isOpen: isMobileMenuOpen,
    handleClose: () => setMobileMenuOpen(false),
    mobileMenu: mobileMenu
  }), /*#__PURE__*/React.createElement(SearchBar, {
    onSearchSubmit: e => _onSearchSubmit(e),
    inputRef: inputRef,
    value: value,
    onChange: e => {
      onInputChange(e);
      setValue(e.target.value);
    },
    onKeyDown: e => {
      handleKeyPress(e);
      setValue(e.target.value);
    },
    isSearchBoxOpen: isSearchBoxOpen,
    handleSearchBox: setIsSearchBoxOpen,
    onClearResult: handleClearResult,
    completionTerm: completionTerm
  }))), /*#__PURE__*/React.createElement(CTAButtons, {
    handleMobileMenu: () => setMobileMenuOpen(!isMobileMenuOpen),
    handleSearchBox: setIsSearchBoxOpen
  }), isSearchBoxOpen && /*#__PURE__*/React.createElement(SearchBox, _extends({
    isLoading: isLoading,
    suggestedBrands: suggestedBrands,
    suggestedCategories: suggestedCategories,
    suggestions: suggestions,
    searchValue: value,
    onClose: handleSearchBoxClose,
    onSearchSubmit: e => _onSearchSubmit(e),
    closeButtonOnTop: true,
    hasPopularSearches: true
  }, searchBox)))), /*#__PURE__*/React.createElement(VouchersCTA, {
    labels: vouchers,
    mobile: true
  }))));
};
export var NAV_HEIGHT = '6rem';
export var NAV_HEIGHT_WITH_VOUCHER = '10.5rem';
export var NAV_ANIMATION = '0.15s cubic-bezier(0.4, 0, 0.2, 1)';
var TOP_NAV_HEIGHT = '3.7rem';
var Placeholder = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.isInverted ? props.theme.palette.primary : props.theme.palette.secondary, props => props.isInverted ? props.theme.palette.secondary : props.theme.palette.primary, props => props.isInverted ? props.theme.palette.secondary : props.theme.palette.disabled, props => props.isInverted ? props.theme.palette.primary : props.theme.palette.primary, props => props.withVoucher ? "calc(" + NAV_HEIGHT + " + 4.5rem)" : "" + NAV_HEIGHT, (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.lg.min;
}, props => props.withVoucher ? "calc(" + NAV_HEIGHT + " + " + TOP_NAV_HEIGHT + " + 4.5rem)" : "calc(" + NAV_HEIGHT + " + " + TOP_NAV_HEIGHT + ")");
var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    opacity: ", ";\n    position: absolute;\n    left: 0;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, props => props.searchIsOpen ? '0' : '1');
var NavBoxWrapper = styled.div.attrs({
  className: 'mx-auto d-flex'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  max-width: 192rem;\n  padding: 0 7rem;\n\n  @media (max-width: ", ") {\n    padding: 0 6rem;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.xl.max;
});
var NavContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), props => {
  if (props.displayNav) return 'translateY(0)';

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

  return "translateY(-" + NAV_HEIGHT + ")";
}, NAV_ANIMATION, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
}, props => {
  return props.displayNav ? "translateY(-" + TOP_NAV_HEIGHT + ")" : props.withVoucher ? "translateY(-14.2rem)" : "translateY(-9.7rem)";
});
var NavBoxContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.lg.min;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.lg.min;
});
var NavBoxInner = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=navbar.component.js.map