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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useState } from 'react';
import { useWindowDimensions, isTouchDevice } from '@sentecacommerce-theme/lib';
import { MenuElement } from './Components/MenuElement';
export var MerchMenu = props => {
  var {
    data
  } = props;
  var [isVisible, setIsVisible] = useState(false);
  var {
    width
  } = useWindowDimensions();
  React.useEffect(() => {
    if (width && width > 1024 && isTouchDevice()) {
      setIsVisible(true);
    }
  }, []);

  var handleMouseActivity = () => {
    if (width && width > 1024 && !isTouchDevice()) {
      setIsVisible(!isVisible);
    }
  };

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Inner, {
    className: "px-md-4",
    onPointerEnter: handleMouseActivity,
    onPointerLeave: handleMouseActivity
  }, /*#__PURE__*/React.createElement(MenuContainer, {
    className: "mx-md-auto"
  }, data.map((item, index) => {
    return /*#__PURE__*/React.createElement(MenuElement, {
      key: "merchMenuItem__" + index,
      data: item,
      isOpen: isVisible,
      position: index
    });
  })))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-top: 8.4rem;\n  display: flex;\n  @media (min-width: ", ") {\n    justify-content: center;\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.md.min;
});
var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: fit-content;\n  display: inline-block;\n  vertical-align: top;\n"])));
var Inner = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-width: 92rem;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    margin: 0 auto;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var MenuContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=merchMenu.component.js.map