"use strict";

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

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

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

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

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

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

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

var _ListElement = require("./ListElement");

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

var Accordion = function Accordion(_ref) {
  var _children$;

  var data = _ref.data;
  var children = data.children,
      label = data.label,
      url = data.url;

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

  var isDesktop = width && width > 640;
  var isNextChildHighlighted = children == null ? void 0 : (_children$ = children[0]) == null ? void 0 : _children$.isHighlighted;

  var _useState = (0, _react.useState)(false),
      isMenuOpen = _useState[0],
      setMenuOpen = _useState[1];

  var _useState2 = (0, _react.useState)(false),
      expandable = _useState2[0],
      setExpandable = _useState2[1]; // If the default value is empty, that means all the children are supposed to be headers


  var isEmpty = (data == null ? void 0 : data.label) === undefined;

  var toggleMenuOpen = function toggleMenuOpen(menuOpen) {
    return function () {
      if (isNextChildHighlighted) return;
      setMenuOpen(function (value) {
        return menuOpen !== undefined ? menuOpen : !value;
      });
    };
  };

  (0, _react.useEffect)(function () {
    setMenuOpen(!isDesktop && !isNextChildHighlighted ? false : true);
  }, [isDesktop, isNextChildHighlighted]);
  (0, _react.useEffect)(function () {
    setExpandable(!isDesktop && !isNextChildHighlighted);
  }, [isDesktop, isNextChildHighlighted]);
  return /*#__PURE__*/_react["default"].createElement(Container, {
    className: "mb-3"
  }, /*#__PURE__*/_react["default"].createElement(Body, {
    isVisible: isMenuOpen
  }, /*#__PURE__*/_react["default"].createElement(List, {
    className: "mx-3",
    expanded: isMenuOpen,
    expandable: expandable,
    onClick: toggleMenuOpen()
  }, /*#__PURE__*/_react["default"].createElement("li", {
    className: "mb-2"
  }, /*#__PURE__*/_react["default"].createElement(Toggleable, {
    expandable: expandable,
    className: !isNextChildHighlighted ? 'pb-2 mb-2 pb-md-0 mb-md-1' : 'mb-1'
  }, /*#__PURE__*/_react["default"].createElement(_ListElement.ListElement, {
    isHighlighted: true,
    url: url,
    label: label
  })), /*#__PURE__*/_react["default"].createElement(ChildMenu, {
    isVisible: isMenuOpen
  }, children == null ? void 0 : children.map(function (child) {
    return !isEmpty && /*#__PURE__*/_react["default"].createElement("li", {
      key: (child == null ? void 0 : child.url) + "-" + (child == null ? void 0 : child.label),
      className: "mb-1"
    }, /*#__PURE__*/_react["default"].createElement(_ListElement.ListElement, {
      isHighlighted: child.isHighlighted,
      url: child == null ? void 0 : child.url,
      label: child == null ? void 0 : child.label,
      isExternal: child == null ? void 0 : child.isExternal
    }));
  }))))));
};

exports.Accordion = Accordion;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  width: 100%;\n  display: inline-block;\n  vertical-align: top;\n  @media (min-width: ", ") {\n    width: 33.33333333333333%;\n  }\n\n  @media (min-width: ", ") {\n    width: 25%;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var Body = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  transition: border-color 0.3s;\n  border-bottom: 1px solid\n    ", ";\n\n  @media (min-width: ", ") {\n    max-height: none !important;\n    border-bottom: none;\n  }\n"])), function (props) {
  return props.isVisible ? props.theme.palette.footerLine : 'transparent';
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.min;
});

var Toggleable = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: ", ";\n"])), function (props) {
  return props.expandable ? 'pointer' : 'default';
});

var ChildMenu = _styledComponents["default"].ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow: hidden;\n\n  @media (max-width: ", ") {\n    max-height: ", ";\n    opacity: ", ";\n    transition: opacity 0.3s, max-height 0.5s;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.min;
}, function (props) {
  return props.isVisible ? '500px' : '0px';
}, function (props) {
  return props.isVisible ? 1 : 0;
});

var List = _styledComponents["default"].ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  list-style: none;\n  max-width: 100%;\n  position: relative;\n\n  &:hover:before {\n    opacity: 0.8;\n  }\n\n  ", "\n\n  @media(min-width: ", ") {\n    &:before {\n      display: none;\n    }\n  }\n"])), function (props) {
  return props.expandable && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      &:before {\n        content: '", "';\n        display: block;\n        position: absolute;\n        cursor: pointer;\n        top: ", ";\n        right: 0;\n        font-size: ", ";\n        line-height: 19px;\n        font-weight: 400;\n        opacity: 1;\n        transition: opacity 0.15s ease;\n      }\n    "])), props.expanded ? '-' : '+', props.expanded ? '0.1rem' : '0.4rem', props.expanded ? '2.8rem' : '2rem');
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map