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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useSelectedFilters, useGlobalLabels, useBoolean } from '@sentecacommerce-theme/lib';
import Collapse from '@kunukn/react-collapse';
import { CheckboxList, FilterWrapper, ButtonsContainer } from '../index';
import { AnimatedModal, Button } from '../../../../../Common';
export var CheckboxFilter = (_ref) => {
  var {
    data,
    labels
  } = _ref;
  var [isExpanded, setIsExpanded] = useBoolean(false);
  var [isMobileModalVisible, setIsMobileModalVisible] = useBoolean(false);
  var selectedFiltersCount = useSelectedFilters(data).length;
  var itemsLength = data.items.length;
  var hasExpandButton = itemsLength > 13;
  var {
    buttons
  } = useGlobalLabels();

  var open = () => setIsExpanded.on();

  var close = () => setIsExpanded.off();

  var openMobileModal = () => setIsMobileModalVisible.on();

  var closeMobileModal = () => setIsMobileModalVisible.off();

  return /*#__PURE__*/React.createElement(FilterWrapper, {
    onMobileArrowClick: openMobileModal,
    withMobileArrow: true,
    count: selectedFiltersCount,
    filterName: data.name
  }, /*#__PURE__*/React.createElement(Desktop, null, !hasExpandButton && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxList, {
    items: data.items,
    type: data.type
  })), hasExpandButton && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Collapse, {
    collapseHeight: 6 * 32 / 10 + 'rem',
    isOpen: isExpanded,
    transition: "height 0.6s cubic-bezier(.4, 0, .2, 1)"
  }, /*#__PURE__*/React.createElement(CheckboxList, {
    items: data.items,
    type: data.type
  })), /*#__PURE__*/React.createElement(ExpandButton, {
    isExpanded: isExpanded,
    onClick: isExpanded ? close : open
  }, isExpanded ? labels.seeLess : labels.seeMore))), /*#__PURE__*/React.createElement(Mobile, null, isMobileModalVisible && /*#__PURE__*/React.createElement(AnimatedModal, {
    mobileHeight: itemsLength * 39 - 9 + 80 + 'px',
    onClose: closeMobileModal,
    title: data.name,
    bottom: data.selectedCount ? (_ref2) => {
      var {
        closeModal
      } = _ref2;
      return /*#__PURE__*/React.createElement(ButtonsContainer, null, /*#__PURE__*/React.createElement(Button, {
        bordered: true,
        onClick: data.clearAll
      }, buttons.clear, " (", data.selectedCount, ")"), /*#__PURE__*/React.createElement(Button, {
        onClick: closeModal
      }, buttons.apply));
    } : undefined
  }, /*#__PURE__*/React.createElement(MobileItemsContainer, null, /*#__PURE__*/React.createElement(CheckboxList, {
    items: data.items,
    type: data.type
  })))));
};
var Mobile = styled.div.attrs({
  className: 'd-md-none'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Desktop = styled.div.attrs({
  className: 'd-none d-md-block'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var MobileItemsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  padding: 3rem 2rem;\n"])));
var ExpandButton = styled.button.attrs({
  className: 'col-12 pb-0 px-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), props => !props.isExpanded ? '-2rem' : '0', props => !props.isExpanded ? 'linear-gradient(0deg, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%)' : 'transparent', props => !props.isExpanded ? '2rem' : '0');
//# sourceMappingURL=index.js.map