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

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

import React, { useEffect, useState } from 'react';
import styled, { css } from 'styled-components';
import { useWindowDimensions } from '@sentecacommerce-theme/lib';
import { ListElement } from './ListElement';
export var Accordion = (_ref) => {
  var _children$;

  var {
    data
  } = _ref;
  var {
    children,
    label,
    url
  } = data;
  var {
    width
  } = useWindowDimensions();
  var isDesktop = width && width > 640;
  var isNextChildHighlighted = children == null ? void 0 : (_children$ = children[0]) == null ? void 0 : _children$.isHighlighted;
  var [isMenuOpen, setMenuOpen] = useState(false);
  var [expandable, setExpandable] = useState(false); // 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 = menuOpen => () => {
    if (isNextChildHighlighted) return;
    setMenuOpen(value => menuOpen !== undefined ? menuOpen : !value);
  };

  useEffect(() => {
    setMenuOpen(!isDesktop && !isNextChildHighlighted ? false : true);
  }, [isDesktop, isNextChildHighlighted]);
  useEffect(() => {
    setExpandable(!isDesktop && !isNextChildHighlighted);
  }, [isDesktop, isNextChildHighlighted]);
  return /*#__PURE__*/React.createElement(Container, {
    className: "mb-3"
  }, /*#__PURE__*/React.createElement(Body, {
    isVisible: isMenuOpen
  }, /*#__PURE__*/React.createElement(List, {
    className: "mx-3",
    expanded: isMenuOpen,
    expandable: expandable,
    onClick: toggleMenuOpen()
  }, /*#__PURE__*/React.createElement("li", {
    className: "mb-2"
  }, /*#__PURE__*/React.createElement(Toggleable, {
    expandable: expandable,
    className: !isNextChildHighlighted ? 'pb-2 mb-2 pb-md-0 mb-md-1' : 'mb-1'
  }, /*#__PURE__*/React.createElement(ListElement, {
    isHighlighted: true,
    url: url,
    label: label
  })), /*#__PURE__*/React.createElement(ChildMenu, {
    isVisible: isMenuOpen
  }, children == null ? void 0 : children.map(child => !isEmpty && /*#__PURE__*/React.createElement("li", {
    key: (child == null ? void 0 : child.url) + "-" + (child == null ? void 0 : child.label),
    className: "mb-1"
  }, /*#__PURE__*/React.createElement(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
  }))))))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var Body = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), props => props.isVisible ? props.theme.palette.footerLine : 'transparent', (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.min;
});
var Toggleable = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  cursor: ", ";\n"])), props => props.expandable ? 'pointer' : 'default');
var ChildMenu = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n\n  @media (max-width: ", ") {\n    max-height: ", ";\n    opacity: ", ";\n    transition: opacity 0.3s, max-height 0.5s;\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.min;
}, props => props.isVisible ? '500px' : '0px', props => props.isVisible ? 1 : 0);
var List = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), props => props.expandable && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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'), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map