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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';
import { useBoolean } from '@sentecacommerce-theme/lib';
import { Dropdown } from './Dropdown';
import { Typography } from '../../../../Common';
export function debounce(callback, time) {
  var timeout = {
    id: 0
  };
  return () => {
    window.clearTimeout(timeout.id);
    timeout.id = window.setTimeout(callback, time) || 0;
  };
}
export var TopNavElement = props => {
  var {
    label,
    menuItems,
    url,
    header,
    withSeparator,
    icon: Icon,
    onClick
  } = props;
  var [isDropdownOpen, setDropdownState] = useBoolean(false);
  var debounceDropdownOpen = debounce(setDropdownState.on, 200);
  var debounceDropDownClose = debounce(setDropdownState.off, 200);
  var iconElement = typeof Icon === 'string' ? /*#__PURE__*/React.createElement("img", {
    src: Icon,
    alt: label
  }) : Icon && /*#__PURE__*/React.createElement(Icon, null);
  return /*#__PURE__*/React.createElement(Container, {
    className: "py-2",
    onMouseEnter: debounceDropdownOpen,
    onMouseLeave: debounceDropDownClose,
    onClick: onClick
  }, url ? /*#__PURE__*/React.createElement(Link, {
    passHref: true,
    href: url != null ? url : '#',
    prefetch: false
  }, /*#__PURE__*/React.createElement(ItemLink, {
    as: "a",
    variant: "7"
  }, iconElement, /*#__PURE__*/React.createElement(LabelValue, null, header != null ? header : label), withSeparator && /*#__PURE__*/React.createElement(Separator, null, " | "))) : /*#__PURE__*/React.createElement(ItemLink, {
    as: "a",
    variant: "7"
  }, iconElement, /*#__PURE__*/React.createElement(LabelValue, null, label), withSeparator && /*#__PURE__*/React.createElement(Separator, null, " | ")), (menuItems == null ? void 0 : menuItems.length) && /*#__PURE__*/React.createElement(Dropdown, {
    header: label,
    url: url != null ? url : '#',
    elements: menuItems,
    isActive: isDropdownOpen
  }));
};
var Container = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled(Typography).attrs({
  className: 'd-flex align-items-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  &:hover {\n    opacity: 0.5;\n  }\n"])));
var Separator = styled.span.attrs({
  className: 'mr-3 ml-3'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map