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

var _templateObject, _templateObject2;

import React, { useState } from 'react';
import styled from 'styled-components';
import { useGlobalLabels } from '@sentecacommerce-theme/lib';
import { AnimatedDrawer } from '../AnimatedDrawer';
import { MobileSectionMenuItem } from '../MobileSectionMenuItem';
import { ArrowLeft } from '../../../../Common';
export var MobileMenuSectionList = (_ref) => {
  var {
    data,
    parentName,
    handleClose,
    onCloseStart
  } = _ref;
  var {
    back
  } = useGlobalLabels().buttons;
  var [slideLeft, setSlideLeft] = useState(null);
  return /*#__PURE__*/React.createElement(AnimatedDrawer, {
    onCloseStart: onCloseStart,
    handleClose: handleClose,
    showCloseIcon: true,
    isLeft: slideLeft
  }, hideMenu => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackButton, {
    onClick: hideMenu
  }, /*#__PURE__*/React.createElement(ArrowLeft, null), " ", /*#__PURE__*/React.createElement("span", {
    className: "ml-3"
  }, back)), /*#__PURE__*/React.createElement(ParentName, null, parentName), /*#__PURE__*/React.createElement("ul", null, data == null ? void 0 : data.map(section => {
    return /*#__PURE__*/React.createElement(MobileSectionMenuItem, {
      key: section._id,
      data: section,
      slideLeft: () => setSlideLeft(true),
      onCloseStart: () => setSlideLeft(false),
      sectionName: parentName
    });
  }))));
};
var BackButton = styled.button.attrs({
  className: 'd-flex align-items-center justify-content-start mb-4 pt-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  line-height: 1;\n  padding: 0.8rem 0 0 0 !important;\n  height: auto !important;\n  min-height: 0 !important;\n  min-width: 0 !important;\n  width: 100% !important;\n  text-align: left;\n\n  & span {\n    line-height: 0;\n    margin-bottom: -0.2rem;\n    font-weight: bold;\n    font-size: 1.4rem;\n  }\n"])));
var ParentName = styled.div.attrs({
  className: 'pb-3 pt-3'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-size: 2.4rem;\n  line-height: 1.6667;\n"])));
//# sourceMappingURL=index.js.map