"use strict";

exports.__esModule = true;
exports.default = void 0;
var _sortBy2 = _interopRequireDefault(require("lodash/fp/sortBy"));
var _some2 = _interopRequireDefault(require("lodash/fp/some"));
var _filter2 = _interopRequireDefault(require("lodash/fp/filter"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _baseModal = _interopRequireDefault(require("../base-modal"));
var _chip = _interopRequireDefault(require("../../atom/chip"));
var _loader = _interopRequireDefault(require("../../atom/loader"));
var _select = _interopRequireDefault(require("../../atom/select"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
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 SkillPickerModal = (props, context) => {
  const {
    skills,
    selectedSkills,
    skillsLocales,
    skillsScore,
    isOpen,
    isLoading,
    maxSelectedSkills = 6,
    minSelectedSkills = 3,
    onCancel,
    onConfirm,
    onClose
  } = props;
  const {
    translate
  } = context;
  const detectScrollbar = true;
  const [sortedSkills, setSortedSkills] = (0, _react.useState)((0, _sortBy2.default)(skill => skillsLocales[skill], skills));
  const [currentSort, setCurrentSort] = (0, _react.useState)('alphabetical');
  const [selectedSkillList, setSelectedSkillList] = (0, _react.useState)(selectedSkills);
  const handleCancel = (0, _react.useCallback)(() => {
    setSelectedSkillList(selectedSkills);
    onCancel();
  }, [setSelectedSkillList, selectedSkills, onCancel]);
  const handleClose = (0, _react.useCallback)(() => {
    setSelectedSkillList(selectedSkills);
    onClose();
  }, [setSelectedSkillList, selectedSkills, onClose]);
  const skillProgressAvailable = (0, _some2.default)(skill => skillsScore[skill] > 0, skills);
  const skillList = (0, _react.useMemo)(() => {
    return sortedSkills.map(skill => {
      return {
        skillTitle: skillsLocales[skill],
        skillRef: skill,
        focus: selectedSkillList.includes(skill),
        score: skillsScore[skill]
      };
    });
  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);
  const isError = (0, _react.useMemo)(() => selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills, [selectedSkillList, maxSelectedSkills, minSelectedSkills]);
  const footer = (0, _react.useMemo)(() => {
    const footerDescription = selectedSkillList.length > maxSelectedSkills ? translate('skill_focus_footer_error_description', {
      skillNumber: selectedSkillList.length - maxSelectedSkills
    }) : translate('skill_focus_footer_description', {
      skillNumber: minSelectedSkills - selectedSkillList.length
    });
    return {
      text: isLoading || !isError ? '' : footerDescription,
      isError,
      cancelButton: {
        onCancel: handleCancel,
        label: translate('cancel'),
        disabled: isLoading || isError
      },
      confirmButton: {
        onConfirm: () => onConfirm(selectedSkillList),
        label: translate('confirm'),
        iconName: 'circle-check',
        disabled: isLoading || isError
      }
    };
  }, [isError, handleCancel, onConfirm, translate, selectedSkillList, isLoading, maxSelectedSkills, minSelectedSkills]);
  const sorting = (0, _react.useMemo)(() => ({
    theme: 'skillDetail',
    options: ['alphabetical', 'progress'].map(value => ({
      name: value === 'progress' ? translate('progress') : translate('alphabetical'),
      value,
      selected: currentSort === value
    })),
    onChange: value => setCurrentSort(value)
  }), [currentSort, translate]);
  (0, _react.useEffect)(() => {
    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping
    setSortedSkills(prev => (0, _sortBy2.default)(skill => currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill], prev));
  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);
  if (!isLoading && !skills || !isOpen) return null;
  return /*#__PURE__*/_react.default.createElement(_baseModal.default, {
    title: translate('skill_focus'),
    description: translate('skill_focus_description'),
    isOpen: isOpen,
    onClose: handleClose,
    footer: footer,
    headerIcon: {
      name: 'bullseye-arrow',
      backgroundColor: '#DDD1FF'
    },
    detectScrollbar: detectScrollbar
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillPickerContainer
  }, 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.ctaWrapper
  }, /*#__PURE__*/_react.default.createElement("div", null, `${selectedSkillList.length} ${translate('selected')}`), skillProgressAvailable ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.sortWrapper
  }, translate('sort_by'), /*#__PURE__*/_react.default.createElement(_select.default, _extends({}, sorting, {
    "aria-label": "All courses sort"
  }))) : null), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      gap: '16px',
      flexWrap: 'wrap'
    }
  }, skillList.map((skill, index) => {
    const {
      skillTitle,
      skillRef,
      focus,
      score
    } = skill;
    function handleChipClick() {
      const newSelectedSkillList = focus ? (0, _filter2.default)(selectedSkill => selectedSkill !== skillRef, selectedSkillList) : [...selectedSkillList, skill.skillRef];
      setSelectedSkillList(newSelectedSkillList);
    }
    return /*#__PURE__*/_react.default.createElement(_chip.default, _extends({}, skillProgressAvailable ? {
      subText: `${score.toFixed(1)}%`
    } : {}, {
      text: skillTitle,
      selected: focus,
      onClick: handleChipClick,
      key: index,
      backgroundColor: "skin"
    }));
  })))));
};
SkillPickerModal.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
SkillPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
  skills: _propTypes.default.arrayOf(_propTypes.default.string),
  selectedSkills: _propTypes.default.arrayOf(_propTypes.default.string),
  skillsLocales: _propTypes.default.objectOf(_propTypes.default.string),
  skillsScore: _propTypes.default.objectOf(_propTypes.default.number),
  isOpen: _propTypes.default.bool,
  isLoading: _propTypes.default.bool,
  minSelectedSkills: _propTypes.default.number,
  maxSelectedSkills: _propTypes.default.number,
  onCancel: _propTypes.default.func,
  onConfirm: _propTypes.default.func,
  onClose: _propTypes.default.func
} : {};
var _default = exports.default = SkillPickerModal;
//# sourceMappingURL=index.js.map