"use strict";

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

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

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

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

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

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

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

var _MenuElement = require("./Components/MenuElement");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var MerchMenu = function MerchMenu(props) {
  var data = props.data;

  var _useState = (0, _react.useState)(false),
      isVisible = _useState[0],
      setIsVisible = _useState[1];

  var _useWindowDimensions = (0, _lib.useWindowDimensions)(),
      width = _useWindowDimensions.width;

  _react["default"].useEffect(function () {
    if (width && width > 1024 && (0, _lib.isTouchDevice)()) {
      setIsVisible(true);
    }
  }, []);

  var handleMouseActivity = function handleMouseActivity() {
    if (width && width > 1024 && !(0, _lib.isTouchDevice)()) {
      setIsVisible(!isVisible);
    }
  };

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Inner, {
    className: "px-md-4",
    onPointerEnter: handleMouseActivity,
    onPointerLeave: handleMouseActivity
  }, /*#__PURE__*/_react["default"].createElement(MenuContainer, {
    className: "mx-md-auto"
  }, data.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_MenuElement.MenuElement, {
      key: "merchMenuItem__" + index,
      data: item,
      isOpen: isVisible,
      position: index
    });
  })))));
};

exports.MerchMenu = MerchMenu;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  margin-top: 8.4rem;\n  display: flex;\n  @media (min-width: ", ") {\n    justify-content: center;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.breakpoints.md.min;
});

var Wrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: fit-content;\n  display: inline-block;\n  vertical-align: top;\n"])));

var Inner = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 92rem;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
});

var MenuContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: calc(100% - 6.8rem);\n  grid-template-columns: 1fr repeat(2, 4.8rem 1fr);\n\n  @media (min-width: ", ") {\n    width: 100%;\n    grid-template-rows: auto 1fr;\n    display: grid;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=merchMenu.component.js.map