"use strict";

exports.__esModule = true;
exports.default = void 0;
var _toString2 = _interopRequireDefault(require("lodash/fp/toString"));
var _size2 = _interopRequireDefault(require("lodash/fp/size"));
var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
var _react = _interopRequireWildcard(require("react"));
var _title = _interopRequireDefault(require("../../atom/title"));
var _tag = _interopRequireDefault(require("../../atom/tag"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _searchForm = _interopRequireDefault(require("../../molecule/search-form"));
var _provider = _interopRequireWildcard(require("../../atom/provider"));
var _checkboxWithTitle = _interopRequireDefault(require("../../atom/checkbox-with-title"));
var _colors = require("../../variables/colors");
var _style = _interopRequireDefault(require("./style.css"));
var _propsTypes = _interopRequireDefault(require("./props-types"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const CLEAR_BUTTON_STYLE = {
  fontWeight: 'normal',
  padding: 0
};
const SHOW_BUTTON_STYLE = {
  fontSize: '14px',
  fontWeight: '600',
  fontFamily: 'Gilroy',
  marginTop: '16px'
};
const CHECKBOX_TITLE_STYLE = {
  marginRight: '16px',
  fontSize: '14px',
  fontFamily: 'Gilroy',
  fontWeight: 'normal'
};
const INITIAL_VISIBLE_OPTIONS = 5;
const FilterCkeckboxAndSearch = (props, context) => {
  const {
    title,
    searchOptions,
    onClear,
    options
  } = props;
  const translate = (0, _provider.GetTranslateFromContext)(context);
  const [showMore, setShowMore] = (0, _react.useState)(false);
  const selectedFiltersCount = (0, _pipe2.default)((0, _filter2.default)({
    selected: true
  }), _size2.default)(options);
  const hasSelectedFilters = selectedFiltersCount > 0;
  const handleShowMore = (0, _react.useCallback)(() => {
    setShowMore(!showMore);
  }, [showMore]);
  const visibleOptions = (0, _react.useMemo)(() => {
    return showMore ? options : options.slice(0, INITIAL_VISIBLE_OPTIONS);
  }, [options, showMore]);
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": "filter-checkbox-and-search-container",
    className: _style.default.container
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.header,
    "data-testid": "filter-checkbox-and-search-header"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.titleAndTagWrapper,
    "data-testid": "filter-checkbox-and-searh-title-and-tag-wrapper"
  }, /*#__PURE__*/_react.default.createElement(_title.default, {
    title: title
  }), hasSelectedFilters ? /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: (0, _toString2.default)(selectedFiltersCount),
    type: "info",
    size: "S"
  }) : null), hasSelectedFilters ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.clearButtonContainer
  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
    label: translate('clear'),
    type: "text",
    "data-testid": "filter-checkbox-and-search-clear-button",
    onClick: onClear,
    customStyle: CLEAR_BUTTON_STYLE
  })) : null), searchOptions ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.search
  }, /*#__PURE__*/_react.default.createElement(_searchForm.default, searchOptions)) : null, /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": "filter-checkbox-and-search-options-container",
    className: _style.default.optionsContainer
  }, (0, _isEmpty2.default)(visibleOptions) ? /*#__PURE__*/_react.default.createElement("p", {
    className: _style.default.emptySearchResult,
    "data-testid": "filter-checkbox-and-search-empty-message"
  }, "No results... Try adjusting your search.") : visibleOptions.map(({
    value,
    label,
    selected,
    count,
    onClick
  }, index) => /*#__PURE__*/_react.default.createElement("div", {
    key: value,
    className: _style.default.optionRow,
    "data-testid": `filter-checkbox-and-search-option-row-${index}`
  }, /*#__PURE__*/_react.default.createElement(_checkboxWithTitle.default, {
    key: value,
    title: label,
    onChange: onClick,
    name: label,
    checked: selected,
    customStyle: CHECKBOX_TITLE_STYLE
  }), /*#__PURE__*/_react.default.createElement("p", {
    className: _style.default.optionCount
  }, count)))), options.length > INITIAL_VISIBLE_OPTIONS ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
    label: showMore ? translate('Show less') : translate('Show more'),
    type: "text",
    icon: {
      position: 'right',
      faIcon: {
        name: showMore ? 'chevron-up' : 'chevron-down',
        size: 16,
        color: _colors.COLORS.cm_grey_500
      }
    },
    customStyle: SHOW_BUTTON_STYLE,
    onClick: handleShowMore,
    "data-testid": "filter-checkbox-and-search-show-button"
  })) : null);
};
FilterCkeckboxAndSearch.propTypes = process.env.NODE_ENV !== "production" ? _propsTypes.default : {};
FilterCkeckboxAndSearch.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
var _default = exports.default = FilterCkeckboxAndSearch;
//# sourceMappingURL=index.js.map