"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

var _ListItem = require("./ListItem");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

function chunkArray(arr, n) {
  var chunkLength = Math.max(arr.length / n, 1);
  var chunks = [];

  for (var i = 0; i < n; i++) {
    if (chunkLength * (i + 1) <= arr.length) chunks.push(arr.slice(chunkLength * i, chunkLength * (i + 1)));
  }

  return chunks;
}

var MenuElement = function MenuElement(_ref) {
  var isOpen = _ref.isOpen,
      position = _ref.position,
      data = _ref.data;
  var header = data.header,
      children = data.children;

  var _useState = (0, _react.useState)(false),
      isVisible = _useState[0],
      setIsVisible = _useState[1];

  var _useWindowDimensions = (0, _lib.useWindowDimensions)(),
      width = _useWindowDimensions.width;

  var handleClick = function handleClick() {
    if (width && width < 1024) {
      setIsVisible(!isVisible);
    }
  };

  var items = chunkArray(children, 2);
  var isShown = isOpen && width > 1024 || isVisible && width < 1024;
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Checkbox, null), /*#__PURE__*/_react["default"].createElement(MenuHeader, {
    position: position,
    onClick: handleClick
  }, /*#__PURE__*/_react["default"].createElement(Label, null, header)), /*#__PURE__*/_react["default"].createElement(Container, {
    position: position,
    isVisible: isShown
  }, /*#__PURE__*/_react["default"].createElement(List, null, items[0].map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, {
      key: item.label + "__" + item.url,
      isPrimary: true,
      text: item.label,
      url: item.url
    });
  }), /*#__PURE__*/_react["default"].createElement(HideableList, {
    isVisible: isShown
  }, items[1].map(function (item) {
    return /*#__PURE__*/_react["default"].createElement(_ListItem.ListItem, {
      key: item.label + "__" + item.url,
      isHidden: isShown,
      text: item.label,
      url: item.url
    });
  })))));
};

exports.MenuElement = MenuElement;

var MenuHeader = _styledComponents["default"].h4.attrs({
  className: 'mb-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: 1.8em;\n  transition: max-height 1s;\n  animation: 0.2s forwards;\n  overflow: hidden;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n    ", "\n\n    @media (min-width: ", ") {\n    overflow: hidden;\n    white-space: nowrap;\n    transition: all 0.7s;\n    max-height: 1.8em;\n  }\n"])), function (props) {
  return props.position === 0 && "\n        @media (min-width: 640px) {\n        &:nth-child(2) {\n          grid-column: 1;\n          grid-row: 1;\n        }\n      }\n    ";
}, function (props) {
  return props.position === 1 && "\n        &:nth-child(5) {\n          grid-column: 3;\n          grid-row: 1;\n        }\n    ";
}, function (props) {
  return props.position === 2 && "\n        &:nth-child(8) {\n          grid-column: 5;\n          grid-row: 1;\n        }\n    ";
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
});

var Label = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 'base'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n\n  @media (min-width: ", ") {\n    pointer-events: none;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.min;
});

var Checkbox = _styledComponents["default"].input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: none;\n"])));

var Container = _styledComponents["default"].div.attrs({
  className: 'ml-4 ml-md-0'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", "\n\n  ", "\n\n    ", "\n\n    @media (min-width: ", ") {\n    max-height: inherit !important;\n    opacity: 1;\n  }\n  overflow: hidden;\n  opacity: 0;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  transition: all 0.5s;\n  max-height: 0;\n\n  ", "\n"])), function (props) {
  return props.position === 0 && "\n      @media (min-width: " + props.theme.breakpoints.md.min + ") {\n         &:nth-child(3) {\n           grid-column: 1;\n           grid-row: 2;\n         }\n         margin-left: 0 !important;\n       }\n     ";
}, function (props) {
  return props.position === 1 && "\n    @media (min-width: " + props.theme.breakpoints.md.min + ") {\n      &:nth-child(6) {\n        grid-column: 3;\n        grid-row: 2;\n      }\n      margin-left: 0 !important;\n    }\n    ";
}, function (props) {
  return props.position === 2 && "\n    @media (min-width: " + props.theme.breakpoints.md.min + ") {\n      &:nth-child(9) {\n        grid-column: 5;\n        grid-row: 2;\n      }\n      margin-left: !important;\n    }\n   ";
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.min;
}, function (props) {
  return props.isVisible && "\n        max-height: 37rem !important;\n        margin-bottom: 2.4rem !important;\n        opacity: 1;\n      ";
});

var List = _styledComponents["default"].ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  list-style: none;\n"])));

var HideableList = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  transition: all 0.5s;\n  opacity: 1;\n\n  @media (min-width: ", ") {\n    overflow: hidden;\n    max-height: ", ";\n    transition-property: max-height, opacity;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.min;
}, function (props) {
  return props.isVisible ? '40em' : '0';
});
//# sourceMappingURL=index.js.map