"use strict";

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

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

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

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

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

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

var _reactCollapse = _interopRequireDefault(require("@kunukn/react-collapse"));

var _index = require("../index");

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var CheckboxFilter = function CheckboxFilter(_ref) {
  var data = _ref.data,
      labels = _ref.labels;

  var _useBoolean = (0, _lib.useBoolean)(false),
      isExpanded = _useBoolean[0],
      setIsExpanded = _useBoolean[1];

  var _useBoolean2 = (0, _lib.useBoolean)(false),
      isMobileModalVisible = _useBoolean2[0],
      setIsMobileModalVisible = _useBoolean2[1];

  var selectedFiltersCount = (0, _lib.useSelectedFilters)(data).length;
  var itemsLength = data.items.length;
  var hasExpandButton = itemsLength > 13;

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons;

  var open = function open() {
    return setIsExpanded.on();
  };

  var close = function close() {
    return setIsExpanded.off();
  };

  var openMobileModal = function openMobileModal() {
    return setIsMobileModalVisible.on();
  };

  var closeMobileModal = function closeMobileModal() {
    return setIsMobileModalVisible.off();
  };

  return /*#__PURE__*/_react["default"].createElement(_index.FilterWrapper, {
    onMobileArrowClick: openMobileModal,
    withMobileArrow: true,
    count: selectedFiltersCount,
    filterName: data.name
  }, /*#__PURE__*/_react["default"].createElement(Desktop, null, !hasExpandButton && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_index.CheckboxList, {
    items: data.items,
    type: data.type
  })), hasExpandButton && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactCollapse["default"], {
    collapseHeight: 6 * 32 / 10 + 'rem',
    isOpen: isExpanded,
    transition: "height 0.6s cubic-bezier(.4, 0, .2, 1)"
  }, /*#__PURE__*/_react["default"].createElement(_index.CheckboxList, {
    items: data.items,
    type: data.type
  })), /*#__PURE__*/_react["default"].createElement(ExpandButton, {
    isExpanded: isExpanded,
    onClick: isExpanded ? close : open
  }, isExpanded ? labels.seeLess : labels.seeMore))), /*#__PURE__*/_react["default"].createElement(Mobile, null, isMobileModalVisible && /*#__PURE__*/_react["default"].createElement(_Common.AnimatedModal, {
    mobileHeight: itemsLength * 39 - 9 + 80 + 'px',
    onClose: closeMobileModal,
    title: data.name,
    bottom: data.selectedCount ? function (_ref2) {
      var closeModal = _ref2.closeModal;
      return /*#__PURE__*/_react["default"].createElement(_index.ButtonsContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
        bordered: true,
        onClick: data.clearAll
      }, buttons.clear, " (", data.selectedCount, ")"), /*#__PURE__*/_react["default"].createElement(_Common.Button, {
        onClick: closeModal
      }, buttons.apply));
    } : undefined
  }, /*#__PURE__*/_react["default"].createElement(MobileItemsContainer, null, /*#__PURE__*/_react["default"].createElement(_index.CheckboxList, {
    items: data.items,
    type: data.type
  })))));
};

exports.CheckboxFilter = CheckboxFilter;

var Mobile = _styledComponents["default"].div.attrs({
  className: 'd-md-none'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Desktop = _styledComponents["default"].div.attrs({
  className: 'd-none d-md-block'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var MobileItemsContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: 3rem 2rem;\n"])));

var ExpandButton = _styledComponents["default"].button.attrs({
  className: 'col-12 pb-0 px-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  position: relative;\n  z-index: 100;\n  top: ", ";\n  border-radius: 0 !important;\n  background: ", ";\n  padding-top: ", " !important;\n  min-height: 0 !important;\n"])), function (props) {
  return !props.isExpanded ? '-2rem' : '0';
}, function (props) {
  return !props.isExpanded ? 'linear-gradient(0deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%)' : 'transparent';
}, function (props) {
  return !props.isExpanded ? '2rem' : '0';
});
//# sourceMappingURL=index.js.map