"use strict";

exports.__esModule = true;
exports.default = void 0;
var _uniq2 = _interopRequireDefault(require("lodash/fp/uniq"));
var _size2 = _interopRequireDefault(require("lodash/fp/size"));
var _slice2 = _interopRequireDefault(require("lodash/fp/slice"));
var _values2 = _interopRequireDefault(require("lodash/fp/values"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
var _entries2 = _interopRequireDefault(require("lodash/fp/entries"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _proSolidSvgIcons = require("@fortawesome/pro-solid-svg-icons");
var _baseModal = _interopRequireDefault(require("../base-modal"));
var _selectIcon = _interopRequireDefault(require("../../atom/select-icon"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _searchForm = _interopRequireDefault(require("../search-form"));
var _colors = require("../../variables/colors");
var _style = _interopRequireDefault(require("./style.css"));
var _useIconSearch = _interopRequireDefault(require("./use-icon-search"));
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 ICONS_PER_LOAD = 48;
const IconPickerModal = (props, context) => {
  const {
    isOpen,
    onCancel,
    onConfirm,
    onClose
  } = props;
  const {
    translate
  } = context;
  const [selectedIcon, setSelectedIcon] = (0, _react.useState)(null);
  const [displayedIcons, setDisplayedIcons] = (0, _react.useState)([]);
  const [currentIndex, setCurrentIndex] = (0, _react.useState)(0);
  const allIcons = (0, _react.useMemo)(() => (0, _pipe2.default)(_values2.default, (0, _map2.default)((0, _get2.default)('iconName')), _uniq2.default)(_proSolidSvgIcons.fas), []);
  const {
    searchValue,
    searchResults,
    handleSearch,
    handleReset
  } = (0, _useIconSearch.default)(allIcons);
  const handleCancel = (0, _react.useCallback)(() => {
    onCancel();
  }, [onCancel]);
  const handleClose = (0, _react.useCallback)(() => {
    onClose();
  }, [onClose]);
  const handleIconClick = (0, _react.useCallback)(iconName => () => {
    setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
  }, []);
  const loadMoreIcons = (0, _react.useCallback)(() => {
    const nextIndex = currentIndex + ICONS_PER_LOAD;
    const newIcons = (0, _slice2.default)(currentIndex, nextIndex, searchResults);
    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);
    setCurrentIndex(nextIndex);
  }, [currentIndex, searchResults]);
  (0, _react.useEffect)(() => {
    setDisplayedIcons(() => (0, _slice2.default)(0, ICONS_PER_LOAD, searchResults));
    setCurrentIndex(ICONS_PER_LOAD);
  }, [searchResults]);
  const handleScroll = (0, _react.useCallback)(event => {
    const {
      scrollTop,
      clientHeight,
      scrollHeight
    } = event.currentTarget;
    if (scrollHeight - scrollTop <= clientHeight + 1) {
      loadMoreIcons();
    }
  }, [loadMoreIcons]);
  const icons = (0, _react.useMemo)(() => (0, _pipe2.default)(_entries2.default, (0, _map2.default)(([index, iconName]) => /*#__PURE__*/_react.default.createElement(_selectIcon.default, {
    key: `icon-${index}`,
    size: "responsive",
    "data-name": `icon-${index}`,
    "aria-label": iconName,
    faIcon: iconName,
    onClick: handleIconClick(iconName),
    options: {
      isSelected: selectedIcon === iconName
    }
  })))(displayedIcons), [displayedIcons, selectedIcon, handleIconClick]);
  const footer = (0, _react.useMemo)(() => {
    return {
      cancelButton: {
        onCancel: handleCancel,
        label: translate('cancel')
      },
      confirmButton: {
        onConfirm: () => {
          onConfirm(selectedIcon);
          setSelectedIcon(null);
          onClose();
        },
        label: translate('confirm'),
        iconName: 'plus',
        disabled: selectedIcon === null,
        color: _colors.COLORS.cm_primary_blue
      }
    };
  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);
  if (!isOpen) return null;
  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
    title: translate('icon_picker_title'),
    description: translate('icon_picker_description'),
    isOpen: isOpen,
    onClose: handleClose,
    onScroll: handleScroll,
    footer: footer,
    headerIcon: {
      name: 'arrows-rotate',
      backgroundColor: '#D6E6FF'
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconPicker
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.searchWrapper
  }, /*#__PURE__*/_react.default.createElement(_searchForm.default, {
    search: {
      placeholder: translate('search_place_holder'),
      value: searchValue,
      onChange: handleSearch
    },
    onReset: handleReset,
    dataTestId: "search-input"
  })), searchValue && (0, _size2.default)(searchResults) === 0 ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.emptySearchResultContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.emptySearchResultTitle
  }, translate('empty_search_result_title', {
    searchValue
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.emptySearchResultDescription
  }, translate('empty_search_result_description')), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.emptySearchResultClearSearch,
    onClick: handleReset
  }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconsListWrapper
  }, icons))));
};
IconPickerModal.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
IconPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
  isOpen: _propTypes.default.bool,
  onCancel: _propTypes.default.func,
  onConfirm: _propTypes.default.func,
  onClose: _propTypes.default.func
} : {};
var _default = exports.default = IconPickerModal;
//# sourceMappingURL=index.js.map