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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import { useBoolean } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { ArrowRight, ArrowLeft } from '../../../../Common';
import { AnimatedDrawer } from '../AnimatedDrawer';
import { MobileMenuItemList } from '../MobileMenuItemList';
import { MobileBrandList } from '../MobileBrandList';
export var MobileSectionMenuItem = (_ref) => {
  var {
    data,
    slideLeft,
    onCloseStart,
    sectionName
  } = _ref;
  var [isExpanded, setIsExpanded] = useBoolean();

  var openSubItems = e => {
    var _data$items;

    if (!(data != null && (_data$items = data.items) != null && _data$items.length)) return;
    e.preventDefault();
    slideLeft();
    setIsExpanded.on();
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Li, {
    onClick: openSubItems
  }, data.name, /*#__PURE__*/React.createElement(ArrowRight, null)), isExpanded && /*#__PURE__*/React.createElement(AnimatedDrawer, {
    onCloseStart: onCloseStart,
    handleClose: setIsExpanded.off,
    showCloseIcon: true,
    isLeft: null
  }, hideMenu => {
    var _data$items2;

    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BackButton, {
      onClick: hideMenu
    }, /*#__PURE__*/React.createElement(ArrowLeft, null), " ", /*#__PURE__*/React.createElement("span", {
      className: "ml-3"
    }, sectionName)), /*#__PURE__*/React.createElement(ParentName, null, data.name), /*#__PURE__*/React.createElement("ul", null, (_data$items2 = data.items) == null ? void 0 : _data$items2.map(item => {
      return /*#__PURE__*/React.createElement(React.Fragment, {
        key: "Item__" + item._id
      }, /*#__PURE__*/React.createElement(MobileMenuItemList, {
        items: item.data.before
      }), item.type === 'brand' ? /*#__PURE__*/React.createElement(MobileBrandList, {
        brands: item.data.items,
        showOnlyFeatured: false
      }) : /*#__PURE__*/React.createElement(MobileMenuItemList, {
        items: item.data.items
      }), /*#__PURE__*/React.createElement(MobileMenuItemList, {
        items: item.data.after
      }));
    })));
  }));
};
var Li = styled.li.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  text-align: left;\n  line-height: 1.6;\n  font-size: 1.6rem;\n  color: ", ";\n"])), props => props.theme.palette.hint);
var BackButton = styled.button.attrs({
  className: 'd-flex align-items-center justify-content-start mb-4 pt-2'
})(_templateObject2 || (_templateObject2 = _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'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-size: 2.4rem;\n  line-height: 1.6667;\n"])));
//# sourceMappingURL=index.js.map