import _toString from "lodash/fp/toString";
import _size from "lodash/fp/size";
import _pipe from "lodash/fp/pipe";
import _isEmpty from "lodash/fp/isEmpty";
import _filter from "lodash/fp/filter";
import React, { useCallback, useMemo, useState } from 'react';
import Title from '../../atom/title';
import Tag from '../../atom/tag';
import ButtonLink from '../../atom/button-link';
import SearchForm from '../../molecule/search-form';
import Provider, { GetTranslateFromContext } from '../../atom/provider';
import CheckboxWithTitle from '../../atom/checkbox-with-title';
import { COLORS } from '../../variables/colors';
import style from './style.css';
import propTypes from './props-types';
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 = GetTranslateFromContext(context);
  const [showMore, setShowMore] = useState(false);
  const selectedFiltersCount = _pipe(_filter({
    selected: true
  }), _size)(options);
  const hasSelectedFilters = selectedFiltersCount > 0;
  const handleShowMore = useCallback(() => {
    setShowMore(!showMore);
  }, [showMore]);
  const visibleOptions = useMemo(() => {
    return showMore ? options : options.slice(0, INITIAL_VISIBLE_OPTIONS);
  }, [options, showMore]);
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "filter-checkbox-and-search-container",
    className: style.container
  }, /*#__PURE__*/React.createElement("div", {
    className: style.header,
    "data-testid": "filter-checkbox-and-search-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.titleAndTagWrapper,
    "data-testid": "filter-checkbox-and-searh-title-and-tag-wrapper"
  }, /*#__PURE__*/React.createElement(Title, {
    title: title
  }), hasSelectedFilters ? /*#__PURE__*/React.createElement(Tag, {
    label: _toString(selectedFiltersCount),
    type: "info",
    size: "S"
  }) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
    className: style.clearButtonContainer
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    label: translate('clear'),
    type: "text",
    "data-testid": "filter-checkbox-and-search-clear-button",
    onClick: onClear,
    customStyle: CLEAR_BUTTON_STYLE
  })) : null), searchOptions ? /*#__PURE__*/React.createElement("div", {
    className: style.search
  }, /*#__PURE__*/React.createElement(SearchForm, searchOptions)) : null, /*#__PURE__*/React.createElement("div", {
    "data-testid": "filter-checkbox-and-search-options-container",
    className: style.optionsContainer
  }, _isEmpty(visibleOptions) ? /*#__PURE__*/React.createElement("p", {
    className: style.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.createElement("div", {
    key: value,
    className: style.optionRow,
    "data-testid": `filter-checkbox-and-search-option-row-${index}`
  }, /*#__PURE__*/React.createElement(CheckboxWithTitle, {
    key: value,
    title: label,
    onChange: onClick,
    name: label,
    checked: selected,
    customStyle: CHECKBOX_TITLE_STYLE
  }), /*#__PURE__*/React.createElement("p", {
    className: style.optionCount
  }, count)))), options.length > INITIAL_VISIBLE_OPTIONS ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
    label: showMore ? translate('Show less') : translate('Show more'),
    type: "text",
    icon: {
      position: 'right',
      faIcon: {
        name: showMore ? 'chevron-up' : 'chevron-down',
        size: 16,
        color: 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" ? propTypes : {};
FilterCkeckboxAndSearch.contextTypes = {
  translate: Provider.childContextTypes.translate
};
export default FilterCkeckboxAndSearch;
//# sourceMappingURL=index.js.map