"use strict";

exports.__esModule = true;
exports.default = void 0;
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _size2 = _interopRequireDefault(require("lodash/fp/size"));
var _sortBy2 = _interopRequireDefault(require("lodash/fp/sortBy"));
var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
var _sumBy2 = _interopRequireDefault(require("lodash/fp/sumBy"));
var _pipe2 = _interopRequireDefault(require("lodash/fp/pipe"));
var _fromPairs2 = _interopRequireDefault(require("lodash/fp/fromPairs"));
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _cssColorFunction = require("css-color-function");
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _picture = _interopRequireDefault(require("../../atom/picture"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _tooltip = _interopRequireDefault(require("../../atom/tooltip"));
var _reviewNoSkills = _interopRequireDefault(require("../../organism/review-no-skills"));
var _searchForm = _interopRequireDefault(require("../../molecule/search-form"));
var _skillPickerModal = _interopRequireDefault(require("../../molecule/skill-picker-modal"));
var _learningProfileRadarChart = _interopRequireDefault(require("../../molecule/learning-profile-radar-chart"));
var _skillsChartSideInformationPanel = _interopRequireDefault(require("../../molecule/skills-chart-side-information-panel"));
var _learnerSkillCard = _interopRequireDefault(require("../../molecule/learner-skill-card"));
var _searchValueIncluded = _interopRequireDefault(require("../../util/search-value-included"));
var _timeFormat = require("../../util/time-format");
var _cardsList = _interopRequireDefault(require("../../molecule/dashboard/cards-list"));
var _title = _interopRequireDefault(require("../../atom/title"));
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 roundScore = value => Math.round(value * 10) / 10;
const ChangeSkillFocusButton = (props, context) => {
  const {
    onClick
  } = props;
  const {
    skin,
    translate
  } = context;
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "button-explore-wrapper"
  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
    customStyle: {
      backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
      color: primarySkinColor,
      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
    },
    hoverBackgroundColor: primarySkinColor,
    hoverColor: _colors.COLORS.white,
    onClick: onClick,
    label: translate('skills_change_focus'),
    "data-name": "change-skill-focus-button",
    icon: {
      position: 'left',
      faIcon: {
        name: 'arrows-rotate',
        backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
        color: primarySkinColor,
        size: 16
      }
    }
  }));
};
ChangeSkillFocusButton.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
ChangeSkillFocusButton.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: _propTypes.default.func
} : {};
const FilterButton = (props, context) => {
  const {
    active,
    filter,
    skillTotal,
    onClick
  } = props;
  const {
    skin
  } = context;
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
  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))`) : _colors.COLORS.cm_grey_100,
      color: active ? primarySkinColor : _colors.COLORS.cm_grey_500
    }
  }, skillTotal)), [filter, skillTotal, active, primarySkinColor]);
  const buttonProps = {
    customStyle: {
      backgroundColor: active ? (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`) : _colors.COLORS.white,
      color: active ? primarySkinColor : _colors.COLORS.cm_grey_400,
      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.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
  active: _propTypes.default.bool,
  filter: _propTypes.default.string,
  skillTotal: _propTypes.default.number,
  onClick: _propTypes.default.func
} : {};
const MyLearning = (props, context) => {
  const {
    skills,
    selectedSkills = [],
    skillsInformation,
    skillsLocales,
    learnerFeature = true,
    isLoading,
    onSkillFocusConfirm,
    onExploreSkill,
    learningPriorities
  } = props;
  const {
    skin,
    translate
  } = context;
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
  const [open, setOpen] = (0, _react.useState)(false);
  const [selectedSkillsList, setSelectedSkillsList] = (0, _react.useState)(selectedSkills);
  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = (0, _react.useState)(undefined);
  const [searchValue, setSearchValue] = (0, _react.useState)('');
  const [searchResults, setSearchResults] = (0, _react.useState)((0, _sortBy2.default)(skillRef => -(0, _getOr2.default)(0, [skillRef, 'stats', 'score'], skillsInformation), skills));
  const [activeFilter, setActiveFilter] = (0, _react.useState)('all');
  const skillsReviewReady = (0, _react.useMemo)(() => {
    return searchResults.filter(skill => skillsInformation[skill] ? skillsInformation[skill].availableForReview : false);
  }, [searchResults, skillsInformation]);
  const graphDatas = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, roundScore((0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation))]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
  const graphLegends = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, skillsLocales[skill]]), _fromPairs2.default)(selectedSkillsList), [selectedSkillsList, skillsLocales]);
  const filters = (0, _react.useMemo)(() => {
    return {
      all: searchResults,
      review: skillsReviewReady
    };
  }, [searchResults, skillsReviewReady]);
  const sumKpi = (0, _react.useCallback)(kpi => {
    const skillFocusSelectedOnChartScore = (0, _getOr2.default)(0, [skillFocusSelectedOnChart, 'stats', `${kpi}`], skillsInformation);
    return skillFocusSelectedOnChart ? skillFocusSelectedOnChartScore : (0, _sumBy2.default)(skill => skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0, selectedSkillsList);
  }, [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]);
  const coursedCompletedData = (0, _react.useMemo)(() => sumKpi('contentCompleted'), [sumKpi]);
  const questionsToReviewData = (0, _react.useMemo)(() => sumKpi('questionsToReview'), [sumKpi]);
  const learningTimeData = (0, _react.useMemo)(() => sumKpi('learningTime'), [sumKpi]);
  const skillChartPaneLegends = (0, _react.useMemo)(() => translate('skill_scope_specifier', {
    focusedSkill: skillFocusSelectedOnChart ? skillsLocales[skillFocusSelectedOnChart] : translate('focused_skills')
  }), [translate, skillsLocales, skillFocusSelectedOnChart]);
  const skillChartPanelProps = [{
    title: translate('skill_chart_side_panel_content_completed'),
    value: `${coursedCompletedData}`,
    legend: skillChartPaneLegends,
    icon: {
      iconName: 'book-open-cover',
      backgroundColor: _colors.COLORS.turquoise_100
    }
  }, {
    title: translate('skill_chart_side_panel_learning_hours'),
    value: (0, _timeFormat.formatMinutes)(learningTimeData),
    legend: skillChartPaneLegends,
    icon: {
      iconName: 'clock',
      backgroundColor: _colors.COLORS.pink_100
    }
  }, {
    title: translate('skill_chart_side_panel_questions_to_review'),
    value: `${questionsToReviewData}`,
    legend: skillChartPaneLegends,
    icon: {
      iconName: 'circle-question',
      backgroundColor: _colors.COLORS.orange_100
    }
  }];
  const skillsScore = (0, _react.useMemo)(() => (0, _pipe2.default)((0, _map2.default)(skill => [skill, (0, _getOr2.default)(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs2.default)(skills), [skills, skillsInformation]);
  const handleOnDotClick = (0, _react.useCallback)(skillRef => {
    setSkillFocusSelectedOnChart(skillRef);
  }, [setSkillFocusSelectedOnChart]);
  const handleOpenSkillPicker = (0, _react.useCallback)(() => setOpen(true), [setOpen]);
  const handleCloseSkillPicker = (0, _react.useCallback)(() => setOpen(false), [setOpen]);
  const handleConfirmSkillPicker = (0, _react.useCallback)(focusSkillList => {
    setSelectedSkillsList(focusSkillList);
    onSkillFocusConfirm(focusSkillList);
    setOpen(false);
  }, [onSkillFocusConfirm, setSelectedSkillsList, setOpen]);
  const handleSearch = (0, _react.useCallback)(value => {
    setSearchValue(value);
    setSearchResults(skills.filter(skill => (0, _searchValueIncluded.default)(skillsLocales[skill], value)));
  }, [skills, skillsLocales, setSearchValue, setSearchResults]);
  const handleSearchReset = (0, _react.useCallback)(() => {
    setSearchValue('');
    setSearchResults(skills);
  }, [skills, setSearchValue, setSearchResults]);
  const ReviewTooltipContent = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/_react.default.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/_react.default.createElement("ol", null, /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part1')), /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part2')), /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part3')), /*#__PURE__*/_react.default.createElement("li", null, translate('review_mode_tooltip_content_part4')))), [translate]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.backgroundContainer
  }, (0, _isEmpty2.default)(learningPriorities?.cards) ? null : /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.cardsListContainer
  }, /*#__PURE__*/_react.default.createElement(_cardsList.default, _extends({}, learningPriorities, {
    title: /*#__PURE__*/_react.default.createElement(_title.default, {
      type: 'form-group',
      title: translate('learning_priorities'),
      subtitle: translate('learning_priorities_description'),
      icon: {
        iconName: 'sign-post',
        iconColor: _colors.COLORS.cm_orange_800,
        borderRadius: '12px',
        backgroundColor: _colors.COLORS.orange_100
      },
      tag: {
        label: `${(0, _size2.default)(learningPriorities.cards)}`,
        type: 'default',
        size: 'S'
      }
    })
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.container
  }, /*#__PURE__*/_react.default.createElement(_skillPickerModal.default, {
    skills: skills,
    skillsScore: skillsScore,
    selectedSkills: selectedSkillsList,
    skillsLocales: skillsLocales,
    isOpen: open,
    isLoading: isLoading,
    onCancel: handleCloseSkillPicker,
    onConfirm: handleConfirmSkillPicker,
    onClose: handleCloseSkillPicker
  }), learnerFeature ? /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "skill-focus-container",
    className: _style.default.skillFocusContainer
  }, /*#__PURE__*/_react.default.createElement("header", {
    className: _style.default.skillFocusHeader
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusHeaderWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusHeaderIcon
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "bullseye-arrow",
    backgroundColor: _colors.COLORS.purple_100,
    borderRadius: "12px",
    size: {
      faSize: 20,
      wrapperSize: 48
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusHeaderContent
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "skill-focus-title",
    className: _style.default.skillFocusHeaderTitle
  }, translate('skills_focus')), /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "skill-focus-description",
    className: _style.default.skillFocusHeaderDescription
  }, translate('skills_focus_description')))), selectedSkillsList.length >= 3 ? /*#__PURE__*/_react.default.createElement(ChangeSkillFocusButton, {
    onClick: handleOpenSkillPicker
  }) : null), selectedSkillsList.length >= 3 ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusContent
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.radarContainer
  }, /*#__PURE__*/_react.default.createElement(_learningProfileRadarChart.default, {
    totalDataset: 1,
    height: 424,
    width: 680,
    data: graphDatas,
    legend: graphLegends,
    onClick: handleOnDotClick,
    onExploreClick: onExploreSkill,
    colors: [{
      gradient: {
        fill: ['#0062ffff', '#8000ff85'],
        stroke: ['#0062ffff', '#8000FF']
      },
      percentage: {
        color: primarySkinColor,
        background: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`)
      },
      label: {
        color: '#020202ff'
      }
    }]
  })), /*#__PURE__*/_react.default.createElement(_skillsChartSideInformationPanel.default, {
    sidePanelItems: skillChartPanelProps
  })) : /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusEmpty
  }, /*#__PURE__*/_react.default.createElement(_picture.default, {
    className: _style.default.img,
    src: "https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg",
    alt: "demo"
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusEmptyTitle
  }, translate('skills_focus_empty_title')), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusEmptyDescription
  }, translate('skills_focus_empty_description')), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
    label: translate('skills_choose_focus'),
    type: "primary",
    customStyle: {
      width: 'fit-contain',
      backgroundColor: primarySkinColor
    },
    hoverBackgroundColor: (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
    onClick: handleOpenSkillPicker
  })))) : null, /*#__PURE__*/_react.default.createElement("header", {
    className: _style.default.skillListHeader
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillListHeaderIcon
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "dumbbell",
    backgroundColor: _colors.COLORS.yellow_100,
    size: {
      faSize: 20,
      wrapperSize: 48
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillListHeaderContent
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillListHeaderTitle
  }, translate('skills_section_title')), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillListHeaderDescription
  }, translate('skills_section_description'), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
    fontSize: 12,
    iconContainerClassName: _style.default.infoIconTooltip,
    tooltipClassName: _style.default.tooltip,
    TooltipContent: ReviewTooltipContent,
    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.toolBarContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFilterContainer
  }, (0, _keys2.default)(filters).map((filter, index) => {
    function handleFilterClick() {
      setActiveFilter(filter);
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index
    }, /*#__PURE__*/_react.default.createElement(FilterButton, {
      active: activeFilter === filter,
      filter: filter === 'all' ? translate('all') : translate('review_mode_available'),
      skillTotal: filters[filter].length,
      onClick: handleFilterClick
    }));
  })), /*#__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: handleSearchReset
  }))), searchValue && searchResults.length === 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: handleSearchReset
  }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillListContainer
  }, activeFilter === 'review' && filters[activeFilter].length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillListEmptyContainer
  }, /*#__PURE__*/_react.default.createElement(_reviewNoSkills.default, {
    titleNoSkills: translate('review_skill_empty'),
    textNoSkills: translate('review_skill_empty_description'),
    iconSkillAriaLabel: translate('review_skill_empty'),
    imagePosition: "top"
  })) : filters[activeFilter].map((skill, index) => {
    const defaultStats = {
      score: 0,
      content: 0,
      contentCompleted: 0,
      questionsToReview: 0
    };
    function handleExploreSkill() {
      onExploreSkill(skill);
    }
    const {
      score,
      content,
      questionsToReview
    } = skillsInformation[skill] ? skillsInformation[skill].stats : defaultStats;
    const {
      color,
      name
    } = (0, _get2.default)([skill, 'icon'], skillsInformation);
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index
    }, /*#__PURE__*/_react.default.createElement(_learnerSkillCard.default, {
      skillTitle: skillsLocales[skill],
      cardIndex: index,
      focus: selectedSkills.includes(skill),
      metrics: {
        score,
        content,
        questionsToReview
      },
      icon: {
        color,
        name
      },
      onExploreClick: handleExploreSkill
    }));
  }))));
};
MyLearning.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
  skills: _propTypes.default.arrayOf(_propTypes.default.string),
  selectedSkills: _propTypes.default.arrayOf(_propTypes.default.string),
  skillsInformation: _propTypes.default.objectOf(_propTypes.default.shape({
    availableForReview: _propTypes.default.bool,
    stats: _propTypes.default.shape({
      score: _propTypes.default.number,
      content: _propTypes.default.number,
      contentCompleted: _propTypes.default.number,
      questionsToReview: _propTypes.default.number,
      learningTime: _propTypes.default.number
    })
  })),
  skillsLocales: _propTypes.default.objectOf(_propTypes.default.string),
  learnerFeature: _propTypes.default.bool,
  isLoading: _propTypes.default.bool,
  onSkillFocusConfirm: _propTypes.default.func,
  onExploreSkill: _propTypes.default.func,
  learningPriorities: _propTypes.default.shape(_cardsList.default.propTypes)
} : {};
var _default = exports.default = MyLearning;
//# sourceMappingURL=index.js.map