"use strict";

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

exports.__esModule = true;
exports.debounce = debounce;
exports.TopNavElement = void 0;

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

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

var _link = _interopRequireDefault(require("next/link"));

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

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

var _Dropdown = require("./Dropdown");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

function debounce(callback, time) {
  var timeout = {
    id: 0
  };
  return function () {
    window.clearTimeout(timeout.id);
    timeout.id = window.setTimeout(callback, time) || 0;
  };
}

var TopNavElement = function TopNavElement(props) {
  var label = props.label,
      menuItems = props.menuItems,
      url = props.url,
      header = props.header,
      withSeparator = props.withSeparator,
      Icon = props.icon,
      onClick = props.onClick;

  var _useBoolean = (0, _lib.useBoolean)(false),
      isDropdownOpen = _useBoolean[0],
      setDropdownState = _useBoolean[1];

  var debounceDropdownOpen = debounce(setDropdownState.on, 200);
  var debounceDropDownClose = debounce(setDropdownState.off, 200);
  var iconElement = typeof Icon === 'string' ? /*#__PURE__*/_react["default"].createElement("img", {
    src: Icon,
    alt: label
  }) : Icon && /*#__PURE__*/_react["default"].createElement(Icon, null);
  return /*#__PURE__*/_react["default"].createElement(Container, {
    className: "py-2",
    onMouseEnter: debounceDropdownOpen,
    onMouseLeave: debounceDropDownClose,
    onClick: onClick
  }, url ? /*#__PURE__*/_react["default"].createElement(_link["default"], {
    passHref: true,
    href: url != null ? url : '#',
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(ItemLink, {
    as: "a",
    variant: "7"
  }, iconElement, /*#__PURE__*/_react["default"].createElement(LabelValue, null, header != null ? header : label), withSeparator && /*#__PURE__*/_react["default"].createElement(Separator, null, " | "))) : /*#__PURE__*/_react["default"].createElement(ItemLink, {
    as: "a",
    variant: "7"
  }, iconElement, /*#__PURE__*/_react["default"].createElement(LabelValue, null, label), withSeparator && /*#__PURE__*/_react["default"].createElement(Separator, null, " | ")), (menuItems == null ? void 0 : menuItems.length) && /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
    header: label,
    url: url != null ? url : '#',
    elements: menuItems,
    isActive: isDropdownOpen
  }));
};

exports.TopNavElement = TopNavElement;

var Container = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 0;\n  margin-bottom: 0;\n  position: relative;\n  vertical-align: middle;\n  display: inline-block;\n  box-sizing: border-box;\n"])));

var ItemLink = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'd-flex align-items-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n  white-space: nowrap;\n  text-align: center;\n  text-decoration: none;\n  background: 0 0;\n  border-radius: 2px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--top-menu-color);\n\n  & svg,\n  img {\n    width: 1.6rem;\n    margin-top: -0.2rem;\n    margin-right: 0.5rem;\n  }\n"])));

var LabelValue = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  &:hover {\n    opacity: 0.5;\n  }\n"])));

var Separator = _styledComponents["default"].span.attrs({
  className: 'mr-3 ml-3'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=index.js.map