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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React, { useEffect, useRef } from 'react';
import styled, { css } from 'styled-components';
import { Link, OverflowHidden, useBoolean, isTouchDevice, useOutsideClick } from '@sentecacommerce-theme/lib';
import { MenuSectionList } from '../MenuSectionList';
import { BrandsSectionList } from '../BrandsSectionList';
export var MenuItem = (_ref) => {
  var _data$tags, _data$linkUrl;

  var {
    data,
    defaultFeaturedBrandsImage
  } = _ref;
  var [isActive, setIsActive] = useBoolean();
  var [isTablet, setIsTablet] = useBoolean();
  var containerRef = useRef(null);
  useOutsideClick({
    ref: containerRef,
    handler: () => setIsActive.off()
  });
  useEffect(() => {
    var checkIfTablet = isTouchDevice();
    setIsActive.off();

    if (checkIfTablet) {
      setIsTablet.on();
    } else {
      setIsTablet.off();
    }
  }, []);
  var isBrand = Boolean((_data$tags = data.tags) == null ? void 0 : _data$tags.includes('brands'));

  var handleClick = () => {
    if (isTablet && isActive) {
      setIsActive.off();
    } else {
      setIsActive.on();
    }
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, isActive && /*#__PURE__*/React.createElement(OverflowHidden, null), /*#__PURE__*/React.createElement(Container, {
    ref: containerRef,
    onMouseEnter: () => !isTablet && setIsActive.on(),
    onMouseLeave: () => !isTablet && setIsActive.off(),
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(Link, {
    href: isTablet ? '' : (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.createElement(Label, {
    className: "py-3 mx-4",
    isFocused: isActive
  }, data == null ? void 0 : data.name)), /*#__PURE__*/React.createElement(AbsoluteWrapper, {
    className: isBrand ? 'px-5 pb-4 pt-3' : 'px-5 pb-5 pt-3',
    isActive: isActive
  }, isBrand && /*#__PURE__*/React.createElement(BrandsSectionList, {
    defaultFeaturedBrandsImage: defaultFeaturedBrandsImage,
    sections: data == null ? void 0 : data.sections,
    isActive: isActive
  }), !isBrand && /*#__PURE__*/React.createElement(MenuSectionList, {
    sections: data == null ? void 0 : data.sections,
    isActive: isActive
  }))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media only screen and (min-width: ", ") {\n    display: inline-block;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Label = styled.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, props => {
  var _props$theme$palette;

  return props.isFocused && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n    "])), (_props$theme$palette = props.theme.palette) == null ? void 0 : _props$theme$palette.primary);
});
var AbsoluteWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var _theme$palette;

  var {
    theme
  } = _ref4;
  return (_theme$palette = theme.palette) == null ? void 0 : _theme$palette.secondary;
}, props => props.isActive && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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