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

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

import React, { useState } from 'react';
import styled from 'styled-components';
import { useWindowDimensions } from '@sentecacommerce-theme/lib';
import { ListItem } from './ListItem';
import { Typography } from '../../../Common';

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;
}

export var MenuElement = (_ref) => {
  var {
    isOpen,
    position,
    data
  } = _ref;
  var {
    header,
    children
  } = data;
  var [isVisible, setIsVisible] = useState(false);
  var {
    width
  } = useWindowDimensions();

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

  var items = chunkArray(children, 2);
  var isShown = isOpen && width > 1024 || isVisible && width < 1024;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, null), /*#__PURE__*/React.createElement(MenuHeader, {
    position: position,
    onClick: handleClick
  }, /*#__PURE__*/React.createElement(Label, null, header)), /*#__PURE__*/React.createElement(Container, {
    position: position,
    isVisible: isShown
  }, /*#__PURE__*/React.createElement(List, null, items[0].map(item => /*#__PURE__*/React.createElement(ListItem, {
    key: item.label + "__" + item.url,
    isPrimary: true,
    text: item.label,
    url: item.url
  })), /*#__PURE__*/React.createElement(HideableList, {
    isVisible: isShown
  }, items[1].map(item => /*#__PURE__*/React.createElement(ListItem, {
    key: item.label + "__" + item.url,
    isHidden: isShown,
    text: item.label,
    url: item.url
  }))))));
};
var MenuHeader = styled.h4.attrs({
  className: 'mb-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.position === 0 && "\n        @media (min-width: 640px) {\n        &:nth-child(2) {\n          grid-column: 1;\n          grid-row: 1;\n        }\n      }\n    ", props => props.position === 1 && "\n        &:nth-child(5) {\n          grid-column: 3;\n          grid-row: 1;\n        }\n    ", props => props.position === 2 && "\n        &:nth-child(8) {\n          grid-column: 5;\n          grid-row: 1;\n        }\n    ", (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
});
var Label = styled(Typography).attrs({
  variant: 'base'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n\n  @media (min-width: ", ") {\n    pointer-events: none;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.min;
});
var Checkbox = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
var Container = styled.div.attrs({
  className: 'ml-4 ml-md-0'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), props => 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     ", props => 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    ", props => 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   ", (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.min;
}, props => props.isVisible && "\n        max-height: 37rem !important;\n        margin-bottom: 2.4rem !important;\n        opacity: 1;\n      ");
var List = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  list-style: none;\n"])));
var HideableList = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
}, props => props.isVisible ? '40em' : '0');
//# sourceMappingURL=index.js.map