"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.MobileSectionMenuItem = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _lib = require("@sentecacommerce-theme/lib");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Common = require("../../../../Common");

var _AnimatedDrawer = require("../AnimatedDrawer");

var _MobileMenuItemList = require("../MobileMenuItemList");

var _MobileBrandList = require("../MobileBrandList");

var _templateObject, _templateObject2, _templateObject3;

var MobileSectionMenuItem = function MobileSectionMenuItem(_ref) {
  var data = _ref.data,
      slideLeft = _ref.slideLeft,
      onCloseStart = _ref.onCloseStart,
      sectionName = _ref.sectionName;

  var _useBoolean = (0, _lib.useBoolean)(),
      isExpanded = _useBoolean[0],
      setIsExpanded = _useBoolean[1];

  var openSubItems = function 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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Li, {
    onClick: openSubItems
  }, data.name, /*#__PURE__*/_react["default"].createElement(_Common.ArrowRight, null)), isExpanded && /*#__PURE__*/_react["default"].createElement(_AnimatedDrawer.AnimatedDrawer, {
    onCloseStart: onCloseStart,
    handleClose: setIsExpanded.off,
    showCloseIcon: true,
    isLeft: null
  }, function (hideMenu) {
    var _data$items2;

    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(BackButton, {
      onClick: hideMenu
    }, /*#__PURE__*/_react["default"].createElement(_Common.ArrowLeft, null), " ", /*#__PURE__*/_react["default"].createElement("span", {
      className: "ml-3"
    }, sectionName)), /*#__PURE__*/_react["default"].createElement(ParentName, null, data.name), /*#__PURE__*/_react["default"].createElement("ul", null, (_data$items2 = data.items) == null ? void 0 : _data$items2.map(function (item) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
        key: "Item__" + item._id
      }, /*#__PURE__*/_react["default"].createElement(_MobileMenuItemList.MobileMenuItemList, {
        items: item.data.before
      }), item.type === 'brand' ? /*#__PURE__*/_react["default"].createElement(_MobileBrandList.MobileBrandList, {
        brands: item.data.items,
        showOnlyFeatured: false
      }) : /*#__PURE__*/_react["default"].createElement(_MobileMenuItemList.MobileMenuItemList, {
        items: item.data.items
      }), /*#__PURE__*/_react["default"].createElement(_MobileMenuItemList.MobileMenuItemList, {
        items: item.data.after
      }));
    })));
  }));
};

exports.MobileSectionMenuItem = MobileSectionMenuItem;

var Li = _styledComponents["default"].li.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  text-align: left;\n  line-height: 1.6;\n  font-size: 1.6rem;\n  color: ", ";\n"])), function (props) {
  return props.theme.palette.hint;
});

var BackButton = _styledComponents["default"].button.attrs({
  className: 'd-flex align-items-center justify-content-start mb-4 pt-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\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 = _styledComponents["default"].div.attrs({
  className: 'pb-3 pt-3'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 2.4rem;\n  line-height: 1.6667;\n"])));
//# sourceMappingURL=index.js.map