"use strict";

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

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

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

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

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

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

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

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

var _MenuSectionList = require("../MenuSectionList");

var _BrandsSectionList = require("../BrandsSectionList");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var MenuItem = function MenuItem(_ref) {
  var _data$tags, _data$linkUrl;

  var data = _ref.data,
      defaultFeaturedBrandsImage = _ref.defaultFeaturedBrandsImage;

  var _useState = (0, _react.useState)(false),
      isActive = _useState[0],
      setIsActive = _useState[1];

  var router = (0, _router.useRouter)();
  (0, _react.useEffect)(function () {
    setIsActive(false);
  }, [router.asPath]);
  var isBrand = Boolean((_data$tags = data.tags) == null ? void 0 : _data$tags.includes('brands'));
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isActive && /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null), /*#__PURE__*/_react["default"].createElement(Container, {
    onMouseEnter: function onMouseEnter() {
      return setIsActive(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setIsActive(false);
    }
  }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
    href: (data == null ? void 0 : (_data$linkUrl = data.linkUrl) == null ? void 0 : _data$linkUrl[0]) !== '/' ? "/" + (data == null ? void 0 : data.linkUrl) + "/c" : (data == null ? void 0 : data.linkUrl) || '#',
    passHref: true
  }, /*#__PURE__*/_react["default"].createElement(Label, {
    className: "py-3 mx-4",
    isFocused: isActive
  }, data == null ? void 0 : data.name)), /*#__PURE__*/_react["default"].createElement(AbsoluteWrapper, {
    className: isBrand ? 'px-5 pb-4 pt-3' : 'px-5 pb-5 pt-3',
    isActive: isActive
  }, isBrand && /*#__PURE__*/_react["default"].createElement(_BrandsSectionList.BrandsSectionList, {
    defaultFeaturedBrandsImage: defaultFeaturedBrandsImage,
    sections: data == null ? void 0 : data.sections,
    isActive: isActive
  }), !isBrand && /*#__PURE__*/_react["default"].createElement(_MenuSectionList.MenuSectionList, {
    sections: data == null ? void 0 : data.sections,
    isActive: isActive
  }))));
};

exports.MenuItem = MenuItem;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media only screen and (min-width: ", ") {\n    display: inline-block;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Label = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1.5;\n  display: block;\n  color: var(--menu-color);\n\n  transition: border-color 0.1s, color 0.1s;\n  border-bottom: 2px solid transparent;\n  ", "\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
}, function (props) {
  var _props$theme$palette;

  return props.isFocused && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      border-color: ", ";\n    "])), (_props$theme$palette = props.theme.palette) == null ? void 0 : _props$theme$palette.primary);
});

var AbsoluteWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  opacity: 0;\n  visibility: hidden;\n  position: absolute;\n  overflow: hidden;\n  top: 6rem;\n  left: 0;\n  right: 0;\n  transition: transform 0.1s ease, opacity 0ms linear 0.1s,\n    visibility 0ms linear 0.1s;\n  transform-origin: top center;\n  transform: scaleY(0);\n  z-index: 5000000;\n\n  ", "\n"])), function (_ref4) {
  var _theme$palette;

  var theme = _ref4.theme;
  return (_theme$palette = theme.palette) == null ? void 0 : _theme$palette.secondary;
}, function (props) {
  return props.isActive && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      transform: scaleY(1);\n      opacity: 1;\n      visibility: visible;\n      transition: transform 0.25s ease, opacity 0ms, visibility 0ms;\n    "])));
});
//# sourceMappingURL=index.js.map