import _sortBy from "lodash/fp/sortBy";
import _some from "lodash/fp/some";
import _filter from "lodash/fp/filter";
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); }
import React, { useMemo, useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import BaseModal from '../base-modal';
import Chip from '../../atom/chip';
import Loader from '../../atom/loader';
import Select from '../../atom/select';
import Provider from '../../atom/provider';
import style from './style.css';
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] = useState(_sortBy(skill => skillsLocales[skill], skills));
  const [currentSort, setCurrentSort] = useState('alphabetical');
  const [selectedSkillList, setSelectedSkillList] = useState(selectedSkills);
  const handleCancel = useCallback(() => {
    setSelectedSkillList(selectedSkills);
    onCancel();
  }, [setSelectedSkillList, selectedSkills, onCancel]);
  const handleClose = useCallback(() => {
    setSelectedSkillList(selectedSkills);
    onClose();
  }, [setSelectedSkillList, selectedSkills, onClose]);
  const skillProgressAvailable = _some(skill => skillsScore[skill] > 0, skills);
  const skillList = useMemo(() => {
    return sortedSkills.map(skill => {
      return {
        skillTitle: skillsLocales[skill],
        skillRef: skill,
        focus: selectedSkillList.includes(skill),
        score: skillsScore[skill]
      };
    });
  }, [sortedSkills, selectedSkillList, skillsLocales, skillsScore]);
  const isError = useMemo(() => selectedSkillList.length > maxSelectedSkills || selectedSkillList.length < minSelectedSkills, [selectedSkillList, maxSelectedSkills, minSelectedSkills]);
  const footer = 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 = 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]);
  useEffect(() => {
    // eslint-disable-next-line lodash-fp/no-extraneous-function-wrapping
    setSortedSkills(prev => _sortBy(skill => currentSort === 'progress' ? -skillsScore[skill] : skillsLocales[skill], prev));
  }, [currentSort, skillsScore, skillsLocales, setSortedSkills]);
  if (!isLoading && !skills || !isOpen) return null;
  return /*#__PURE__*/React.createElement(BaseModal, {
    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.createElement("div", {
    className: style.skillPickerContainer
  }, isLoading ? /*#__PURE__*/React.createElement("div", {
    className: style.loaderContainer
  }, /*#__PURE__*/React.createElement(Loader, {
    className: style.loader,
    theme: "coorpmanager"
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: style.ctaWrapper
  }, /*#__PURE__*/React.createElement("div", null, `${selectedSkillList.length} ${translate('selected')}`), skillProgressAvailable ? /*#__PURE__*/React.createElement("div", {
    className: style.sortWrapper
  }, translate('sort_by'), /*#__PURE__*/React.createElement(Select, _extends({}, sorting, {
    "aria-label": "All courses sort"
  }))) : null), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      gap: '16px',
      flexWrap: 'wrap'
    }
  }, skillList.map((skill, index) => {
    const {
      skillTitle,
      skillRef,
      focus,
      score
    } = skill;
    function handleChipClick() {
      const newSelectedSkillList = focus ? _filter(selectedSkill => selectedSkill !== skillRef, selectedSkillList) : [...selectedSkillList, skill.skillRef];
      setSelectedSkillList(newSelectedSkillList);
    }
    return /*#__PURE__*/React.createElement(Chip, _extends({}, skillProgressAvailable ? {
      subText: `${score.toFixed(1)}%`
    } : {}, {
      text: skillTitle,
      selected: focus,
      onClick: handleChipClick,
      key: index,
      backgroundColor: "skin"
    }));
  })))));
};
SkillPickerModal.contextTypes = {
  translate: Provider.childContextTypes.translate
};
SkillPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
  skills: PropTypes.arrayOf(PropTypes.string),
  selectedSkills: PropTypes.arrayOf(PropTypes.string),
  skillsLocales: PropTypes.objectOf(PropTypes.string),
  skillsScore: PropTypes.objectOf(PropTypes.number),
  isOpen: PropTypes.bool,
  isLoading: PropTypes.bool,
  minSelectedSkills: PropTypes.number,
  maxSelectedSkills: PropTypes.number,
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  onClose: PropTypes.func
} : {};
export default SkillPickerModal;
//# sourceMappingURL=index.js.map