"use strict";

exports.__esModule = true;
exports.default = void 0;
var _pick2 = _interopRequireDefault(require("lodash/fp/pick"));
var _assign2 = _interopRequireDefault(require("lodash/fp/assign"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _cssColorFunction = require("css-color-function");
var _baseModal = _interopRequireDefault(require("../base-modal"));
var _listItem = _interopRequireDefault(require("../../organism/list-item"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _loader = _interopRequireDefault(require("../../atom/loader"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _select = require("../../atom/select");
var _searchForm = _interopRequireDefault(require("../search-form"));
var _searchValueIncluded = _interopRequireDefault(require("../../util/search-value-included"));
var _colors = require("../../variables/colors");
var _style = _interopRequireDefault(require("./style.css"));
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 }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const FilterButton = props => {
  const {
    active,
    filter,
    itemTotal,
    onClick
  } = props;
  const primarySkinColor = _colors.COLORS.cm_primary_blue;
  const Content = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, filter, /*#__PURE__*/_react.default.createElement("span", {
    className: active ? _style.default.skillFilterNumber : _style.default.skillFilterNumberInActive,
    style: {
      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : '#EAEAEB',
      color: active ? primarySkinColor : '#515161'
    }
  }, itemTotal)), [filter, itemTotal, active, primarySkinColor]);
  const buttonProps = {
    customStyle: {
      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : 'transparent',
      color: active ? primarySkinColor : '#9999A8',
      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',
      width: 'fit-content'
    },
    onClick,
    content: /*#__PURE__*/_react.default.createElement(Content, null),
    'data-name': 'change-skill-focus-button'
  };
  return /*#__PURE__*/_react.default.createElement(_buttonLink.default, buttonProps);
};
FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
  active: _propTypes.default.bool,
  filter: _propTypes.default.string,
  itemTotal: _propTypes.default.number,
  onClick: _propTypes.default.func
} : {};
const LearningPriorityModal = (props, context) => {
  const {
    priorities,
    preselected,
    isOpen,
    isLoading,
    filters,
    onCancel,
    onAdd,
    onClose
  } = props;
  const {
    translate
  } = context;
  const [selectedPriority, setSelectedPriority] = (0, _react.useState)('');
  const [selectedPriorityType, setSelectedPriorityType] = (0, _react.useState)('');
  const [searchValue, setSearchValue] = (0, _react.useState)('');
  const [filterValue, setFilterValue] = (0, _react.useState)('all');
  const [searchResults, setSearchResults] = (0, _react.useState)(priorities);
  const handleCancel = (0, _react.useCallback)(() => {
    setSelectedPriority('');
    setSelectedPriorityType('');
    onCancel();
  }, [setSelectedPriority, setSelectedPriorityType, onCancel]);
  const handleClose = (0, _react.useCallback)(() => {
    setSelectedPriority('');
    setSelectedPriorityType('');
    onClose();
  }, [setSelectedPriority, setSelectedPriorityType, onClose]);
  const handleSearch = (0, _react.useCallback)(value => {
    setSearchValue(value);
    setSearchResults(priorities.filter(priority => (0, _searchValueIncluded.default)(priority.title, value)));
  }, [priorities, setSearchValue, setSearchResults]);
  const handleSearchReset = (0, _react.useCallback)(() => {
    setSearchValue('');
    setSearchResults(priorities);
  }, [priorities, setSearchValue, setSearchResults]);
  (0, _react.useEffect)(() => {
    setSearchResults(priorities);
  }, [priorities]);
  const priorityList = (0, _react.useMemo)(() => {
    return searchResults.map(priority => {
      const isPreSelectedPriority = preselected.some(selected => selected === priority.priorityRef);
      return (0, _assign2.default)({
        selected: isPreSelectedPriority,
        disabled: isPreSelectedPriority
      }, (0, _pick2.default)(['title', 'priorityRef', 'type', 'courses'], priority));
    });
  }, [searchResults, preselected]);
  const footer = (0, _react.useMemo)(() => {
    return {
      cancelButton: {
        onCancel: handleCancel,
        label: translate('cancel')
      },
      confirmButton: {
        onConfirm: () => {
          onAdd(selectedPriority, selectedPriorityType);
          setSelectedPriority('');
          setSelectedPriorityType('');
          onClose();
        },
        label: translate('add'),
        iconName: 'plus',
        disabled: isLoading || !selectedPriority,
        color: _colors.COLORS.cm_primary_blue
      }
    };
  }, [handleCancel, setSelectedPriority, setSelectedPriorityType, onAdd, onClose, translate, selectedPriority, selectedPriorityType, isLoading]);
  if (!isLoading && !priorities || !isOpen) return null;
  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
    title: translate('learning_priority_modal_title'),
    description: translate('learning_priority_modal_description'),
    isOpen: isOpen,
    onClose: handleClose,
    footer: footer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.LearningPriorityContainer
  }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.loaderContainer
  }, /*#__PURE__*/_react.default.createElement(_loader.default, {
    className: _style.default.loader,
    theme: "coorpmanager"
  })) : /*#__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_priority_place_holder'),
      value: searchValue,
      onChange: handleSearch
    },
    onReset: handleSearchReset
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.filterWrapper
  }, searchResults.length > 0 ? filters.map((filter, index) => {
    const {
      name,
      value,
      count
    } = filter;
    function handleChange() {
      setFilterValue(value);
      handleSearchReset();
    }
    if (count === 0) return null;
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      className: _style.default.filterButtonWrapper
    }, /*#__PURE__*/_react.default.createElement(FilterButton, {
      active: filterValue === value,
      filter: name,
      onClick: handleChange,
      itemTotal: count
    }));
  }) : null), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.priorityListWrapper
  }, priorityList.map(priority => {
    const {
      title,
      priorityRef,
      courses = null,
      type,
      selected,
      disabled
    } = priority;
    function handlePriorityClick() {
      if (selectedPriority === priorityRef) {
        setSelectedPriority('');
        setSelectedPriorityType('');
        return;
      }
      setSelectedPriority(priorityRef);
      setSelectedPriorityType(type);
    }
    if (filterValue !== 'all' && type !== filterValue || !type || !title) return null;
    return /*#__PURE__*/_react.default.createElement(_listItem.default, _extends({}, courses !== null ? {
      subtitle: `${courses} ${translate('courses')}`
    } : {}, {
      title: title,
      selected: selected || selectedPriority === priorityRef,
      selectedColor: _colors.COLORS.cm_primary_blue,
      disabled: disabled,
      onClick: handlePriorityClick,
      tags: [{
        label: type,
        type: 'default'
      }],
      key: priorityRef,
      backgroundColor: "skin"
    }));
  })))));
};
LearningPriorityModal.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
LearningPriorityModal.propTypes = process.env.NODE_ENV !== "production" ? {
  priorities: _propTypes.default.arrayOf(_propTypes.default.shape({
    priorityRef: _propTypes.default.string,
    title: _propTypes.default.string,
    courses: _propTypes.default.number,
    type: _propTypes.default.oneOf(['skill', 'playlist', 'certificate'])
  })),
  preselected: _propTypes.default.arrayOf(_propTypes.default.string),
  isOpen: _propTypes.default.bool,
  isLoading: _propTypes.default.bool,
  filters: _propTypes.default.arrayOf(_propTypes.default.shape({
    ..._select.SelectOptionPropTypes,
    count: _propTypes.default.number
  })),
  onCancel: _propTypes.default.func,
  onAdd: _propTypes.default.func,
  onClose: _propTypes.default.func
} : {};
var _default = exports.default = LearningPriorityModal;
//# sourceMappingURL=index.js.map