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

var _templateObject;

import React, { useState } from 'react';
import styled from 'styled-components';
import { useRouter } from 'next/router';
import { OverflowHidden } from '@sentecacommerce-theme/lib';
import { authApi, useUIFunctions, useConfigState } from '@sentecacommerce-theme/lib';
import { ArrowRight } from '../../../Common/Icons';
import { SupportButtons } from './SupportButtons';
import { AuthButtons } from './AuthButtons';
import { User } from './User';
import { MobileMenuItem } from './MobileMenuItem';
import { AnimatedDrawer } from './AnimatedDrawer';
export var MobileMenu = (_ref) => {
  var {
    data,
    handleClose,
    mobileMenu
  } = _ref;
  var {
    views
  } = useConfigState();
  var {
    data: isAuthenticated
  } = authApi.isAuthenticated();
  var router = useRouter();
  var {
    enqueueView
  } = useUIFunctions();
  var [slideLeft, setSlideLeft] = useState(null);
  return /*#__PURE__*/React.createElement(AnimatedDrawer, {
    isLeft: slideLeft,
    showBackdrop: true,
    showCloseIcon: true,
    handleClose: handleClose
  }, /*#__PURE__*/React.createElement(HideMobileMenuProvider, {
    hideMenu: handleClose
  }, /*#__PURE__*/React.createElement(OverflowHidden, null), isAuthenticated && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementWrapper, {
    className: "pb-4 mb-2",
    onClick: () => router.push('/profile')
  }, /*#__PURE__*/React.createElement(User, null), /*#__PURE__*/React.createElement(ArrowRight, null))), /*#__PURE__*/React.createElement("ul", null, data == null ? void 0 : data.map(menu => /*#__PURE__*/React.createElement(MobileMenuItem, {
    data: menu,
    key: "Menu__" + menu._id,
    onItemClick: handleClose,
    slideLeft: () => setSlideLeft(true),
    reset: () => setSlideLeft(false)
  }))), !isAuthenticated && /*#__PURE__*/React.createElement(AuthButtons, {
    handleModal: () => {
      handleClose();
      enqueueView(views.auth);
    }
  }), /*#__PURE__*/React.createElement(SupportButtons, {
    data: mobileMenu || []
  })));
};
var HideMobileMenuContext = /*#__PURE__*/React.createContext({
  hideMenu: () => {}
});

var HideMobileMenuProvider = (_ref2) => {
  var {
    hideMenu,
    children
  } = _ref2;
  return /*#__PURE__*/React.createElement(HideMobileMenuContext.Provider, {
    value: {
      hideMenu
    }
  }, children);
};

export var useHideMobileDrawer = () => {
  var _React$useContext;

  return (_React$useContext = React.useContext(HideMobileMenuContext)) == null ? void 0 : _React$useContext.hideMenu;
};
var ElementWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  width: 100%;\n  display: flex;\n"])));
//# sourceMappingURL=index.js.map