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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React, { useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { useConfigState, useWindowDimensions, useAccordion, useBoolean } from '@sentecacommerce-theme/lib';
import { IconMinus, IconPlus } from '../../../Common/Icons';
import { Typography } from '../../../Common';
import { Accordion } from '../Accordion';
export var Toggle = (_ref) => {
  var {
    item
  } = _ref;
  var {
    collapse,
    expand,
    height,
    ref
  } = useAccordion({});
  var {
    width
  } = useWindowDimensions();
  var {
    theme
  } = useConfigState();
  var isDesktop = width >= Number(theme.breakpoints.lg.min.split('px')[0]);
  var [isToggleOpen, setIsToggleOpen] = useBoolean(isDesktop);
  var toggle = useCallback(() => {
    if (!isDesktop) {
      setIsToggleOpen.toggle();
    }
  }, [isToggleOpen]);
  useEffect(() => {
    if (isDesktop) {
      expand();
    }
  }, []);
  return /*#__PURE__*/React.createElement(InnerContent, {
    onClick: () => {
      height ? collapse() : expand();
      toggle();
    }
  }, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Title, null, item.title), isToggleOpen && /*#__PURE__*/React.createElement(IconMinus, {
    className: "d-lg-none"
  }), !isToggleOpen && /*#__PURE__*/React.createElement(IconPlus, {
    className: "d-lg-none"
  })), /*#__PURE__*/React.createElement(AccordionWrapper, {
    height: height,
    ref: ref
  }, /*#__PURE__*/React.createElement(Accordion, {
    item: item
  })));
};
var InnerContent = styled.div.attrs({
  className: 'col-lg-4 py-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 33.33%;\n  padding: 0;\n\n  @media (max-width: ", ") {\n    border-bottom: 1px solid ", ";\n    display: flex;\n    flex-direction: column;\n    padding: 3.2rem;\n    width: 100%;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, props => props.theme.palette.grey);
var AccordionWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    height: ", "rem;\n    opacity: ", ";\n    overflow: hidden;\n    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n"])), props => props.theme.breakpoints.md.max, props => props.height / 10, props => props.height ? 1 : 0);
var TitleContainer = styled.div.attrs({
  className: 'd-flex justify-content-between align-items-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    max-height: 2rem;\n    max-width: 2rem;\n    min-width: 2rem;\n    cursor: pointer;\n    margin-left: 1.5rem;\n    margin-top: 0.3rem;\n  }\n"])));
var Title = styled(Typography).attrs({
  as: 'h1',
  variant: 2,
  className: 'mt-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-size: 1.7rem;\n  @media (max-width: ", ") {\n    max-width: 15rem;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.sm.min;
});
//# sourceMappingURL=index.js.map