"use strict";

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

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

exports.__esModule = true;
exports.Toggle = 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 _Icons = require("../../../Common/Icons");

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

var _Accordion = require("../Accordion");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var Toggle = function Toggle(_ref) {
  var item = _ref.item;

  var _useAccordion = (0, _lib.useAccordion)({}),
      collapse = _useAccordion.collapse,
      expand = _useAccordion.expand,
      height = _useAccordion.height,
      ref = _useAccordion.ref;

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

  var _useConfigState = (0, _lib.useConfigState)(),
      theme = _useConfigState.theme;

  var isDesktop = width >= Number(theme.breakpoints.lg.min.split('px')[0]);

  var _useBoolean = (0, _lib.useBoolean)(isDesktop),
      isToggleOpen = _useBoolean[0],
      setIsToggleOpen = _useBoolean[1];

  var toggle = (0, _react.useCallback)(function () {
    if (!isDesktop) {
      setIsToggleOpen.toggle();
    }
  }, [isToggleOpen]);
  (0, _react.useEffect)(function () {
    if (isDesktop) {
      expand();
    }
  }, []);
  return /*#__PURE__*/_react["default"].createElement(InnerContent, {
    onClick: function onClick() {
      height ? collapse() : expand();
      toggle();
    }
  }, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(Title, null, item.title), isToggleOpen && /*#__PURE__*/_react["default"].createElement(_Icons.IconMinus, {
    className: "d-lg-none"
  }), !isToggleOpen && /*#__PURE__*/_react["default"].createElement(_Icons.IconPlus, {
    className: "d-lg-none"
  })), /*#__PURE__*/_react["default"].createElement(AccordionWrapper, {
    height: height,
    ref: ref
  }, /*#__PURE__*/_react["default"].createElement(_Accordion.Accordion, {
    item: item
  })));
};

exports.Toggle = Toggle;

var InnerContent = _styledComponents["default"].div.attrs({
  className: 'col-lg-4 py-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  return props.theme.palette.grey;
});

var AccordionWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (props) {
  return props.theme.breakpoints.md.max;
}, function (props) {
  return props.height / 10;
}, function (props) {
  return props.height ? 1 : 0;
});

var TitleContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-between align-items-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\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 = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h1',
  variant: 2,
  className: 'mt-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.7rem;\n  @media (max-width: ", ") {\n    max-width: 15rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.sm.min;
});
//# sourceMappingURL=index.js.map