import _isEmpty from "lodash/fp/isEmpty";
import _size from "lodash/fp/size";
import _sortBy from "lodash/fp/sortBy";
import _getOr from "lodash/fp/getOr";
import _sumBy from "lodash/fp/sumBy";
import _pipe from "lodash/fp/pipe";
import _fromPairs from "lodash/fp/fromPairs";
import _map from "lodash/fp/map";
import _keys from "lodash/fp/keys";
import _get from "lodash/fp/get";
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, { useCallback, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { convert } from 'css-color-function';
import Provider from '../../atom/provider';
import Icon from '../../atom/icon';
import Picture from '../../atom/picture';
import ButtonLink from '../../atom/button-link';
import ToolTip from '../../atom/tooltip';
import ReviewNoSkills from '../../organism/review-no-skills';
import SearchForm from '../../molecule/search-form';
import SkillPickerModal from '../../molecule/skill-picker-modal';
import ResponsiveLearningProfileRadarChart from '../../molecule/learning-profile-radar-chart';
import SkillsChartSideInformationPanel from '../../molecule/skills-chart-side-information-panel';
import LearnerSkillCard from '../../molecule/learner-skill-card';
import searchValueIncluded from '../../util/search-value-included';
import { formatMinutes } from '../../util/time-format';
import CardsList from '../../molecule/dashboard/cards-list';
import Title from '../../atom/title';
import { COLORS } from '../../variables/colors';
import style from './style.css';
const roundScore = value => Math.round(value * 10) / 10;
const ChangeSkillFocusButton = (props, context) => {
  const {
    onClick
  } = props;
  const {
    skin,
    translate
  } = context;
  const primarySkinColor = _get('common.primary', skin);
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "button-explore-wrapper"
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    customStyle: {
      backgroundColor: 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.white,
    onClick: onClick,
    label: translate('skills_change_focus'),
    "data-name": "change-skill-focus-button",
    icon: {
      position: 'left',
      faIcon: {
        name: 'arrows-rotate',
        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
        color: primarySkinColor,
        size: 16
      }
    }
  }));
};
ChangeSkillFocusButton.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
ChangeSkillFocusButton.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: PropTypes.func
} : {};
const FilterButton = (props, context) => {
  const {
    active,
    filter,
    skillTotal,
    onClick
  } = props;
  const {
    skin
  } = context;
  const primarySkinColor = _get('common.primary', skin);
  const Content = useCallback(() => /*#__PURE__*/React.createElement("div", null, filter, /*#__PURE__*/React.createElement("span", {
    className: active ? style.skillFilterNumber : style.skillFilterNumberInActive,
    style: {
      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : COLORS.cm_grey_100,
      color: active ? primarySkinColor : COLORS.cm_grey_500
    }
  }, skillTotal)), [filter, skillTotal, active, primarySkinColor]);
  const buttonProps = {
    customStyle: {
      backgroundColor: active ? convert(`color(${primarySkinColor} a(0.07))`) : COLORS.white,
      color: active ? primarySkinColor : 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.createElement(Content, null),
    'data-name': 'change-skill-focus-button'
  };
  return /*#__PURE__*/React.createElement(ButtonLink, buttonProps);
};
FilterButton.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
FilterButton.propTypes = process.env.NODE_ENV !== "production" ? {
  active: PropTypes.bool,
  filter: PropTypes.string,
  skillTotal: PropTypes.number,
  onClick: PropTypes.func
} : {};
const MyLearning = (props, context) => {
  const {
    skills,
    selectedSkills = [],
    skillsInformation,
    skillsLocales,
    learnerFeature = true,
    isLoading,
    onSkillFocusConfirm,
    onExploreSkill,
    learningPriorities
  } = props;
  const {
    skin,
    translate
  } = context;
  const primarySkinColor = _get('common.primary', skin);
  const [open, setOpen] = useState(false);
  const [selectedSkillsList, setSelectedSkillsList] = useState(selectedSkills);
  const [skillFocusSelectedOnChart, setSkillFocusSelectedOnChart] = useState(undefined);
  const [searchValue, setSearchValue] = useState('');
  const [searchResults, setSearchResults] = useState(_sortBy(skillRef => -_getOr(0, [skillRef, 'stats', 'score'], skillsInformation), skills));
  const [activeFilter, setActiveFilter] = useState('all');
  const skillsReviewReady = useMemo(() => {
    return searchResults.filter(skill => skillsInformation[skill] ? skillsInformation[skill].availableForReview : false);
  }, [searchResults, skillsInformation]);
  const graphDatas = useMemo(() => _pipe(_map(skill => [skill, roundScore(_getOr(0, [skill, 'stats', 'score'], skillsInformation))]), _fromPairs)(selectedSkillsList), [selectedSkillsList, skillsInformation]);
  const graphLegends = useMemo(() => _pipe(_map(skill => [skill, skillsLocales[skill]]), _fromPairs)(selectedSkillsList), [selectedSkillsList, skillsLocales]);
  const filters = useMemo(() => {
    return {
      all: searchResults,
      review: skillsReviewReady
    };
  }, [searchResults, skillsReviewReady]);
  const sumKpi = useCallback(kpi => {
    const skillFocusSelectedOnChartScore = _getOr(0, [skillFocusSelectedOnChart, 'stats', `${kpi}`], skillsInformation);
    return skillFocusSelectedOnChart ? skillFocusSelectedOnChartScore : _sumBy(skill => skillsInformation[skill] ? skillsInformation[skill].stats[kpi] : 0, selectedSkillsList);
  }, [skillFocusSelectedOnChart, skillsInformation, selectedSkillsList]);
  const coursedCompletedData = useMemo(() => sumKpi('contentCompleted'), [sumKpi]);
  const questionsToReviewData = useMemo(() => sumKpi('questionsToReview'), [sumKpi]);
  const learningTimeData = useMemo(() => sumKpi('learningTime'), [sumKpi]);
  const skillChartPaneLegends = 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.turquoise_100
    }
  }, {
    title: translate('skill_chart_side_panel_learning_hours'),
    value: formatMinutes(learningTimeData),
    legend: skillChartPaneLegends,
    icon: {
      iconName: 'clock',
      backgroundColor: COLORS.pink_100
    }
  }, {
    title: translate('skill_chart_side_panel_questions_to_review'),
    value: `${questionsToReviewData}`,
    legend: skillChartPaneLegends,
    icon: {
      iconName: 'circle-question',
      backgroundColor: COLORS.orange_100
    }
  }];
  const skillsScore = useMemo(() => _pipe(_map(skill => [skill, _getOr(0, [skill, 'stats', 'score'], skillsInformation)]), _fromPairs)(skills), [skills, skillsInformation]);
  const handleOnDotClick = useCallback(skillRef => {
    setSkillFocusSelectedOnChart(skillRef);
  }, [setSkillFocusSelectedOnChart]);
  const handleOpenSkillPicker = useCallback(() => setOpen(true), [setOpen]);
  const handleCloseSkillPicker = useCallback(() => setOpen(false), [setOpen]);
  const handleConfirmSkillPicker = useCallback(focusSkillList => {
    setSelectedSkillsList(focusSkillList);
    onSkillFocusConfirm(focusSkillList);
    setOpen(false);
  }, [onSkillFocusConfirm, setSelectedSkillsList, setOpen]);
  const handleSearch = useCallback(value => {
    setSearchValue(value);
    setSearchResults(skills.filter(skill => searchValueIncluded(skillsLocales[skill], value)));
  }, [skills, skillsLocales, setSearchValue, setSearchResults]);
  const handleSearchReset = useCallback(() => {
    setSearchValue('');
    setSearchResults(skills);
  }, [skills, setSearchValue, setSearchResults]);
  const ReviewTooltipContent = useCallback(() => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('review_mode_tooltip_header'))), /*#__PURE__*/React.createElement("p", null, translate('review_mode_tooltip_content')), /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, translate('review_mode_tooltip_content_part1')), /*#__PURE__*/React.createElement("li", null, translate('review_mode_tooltip_content_part2')), /*#__PURE__*/React.createElement("li", null, translate('review_mode_tooltip_content_part3')), /*#__PURE__*/React.createElement("li", null, translate('review_mode_tooltip_content_part4')))), [translate]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.backgroundContainer
  }, _isEmpty(learningPriorities?.cards) ? null : /*#__PURE__*/React.createElement("div", {
    className: style.cardsListContainer
  }, /*#__PURE__*/React.createElement(CardsList, _extends({}, learningPriorities, {
    title: /*#__PURE__*/React.createElement(Title, {
      type: 'form-group',
      title: translate('learning_priorities'),
      subtitle: translate('learning_priorities_description'),
      icon: {
        iconName: 'sign-post',
        iconColor: COLORS.cm_orange_800,
        borderRadius: '12px',
        backgroundColor: COLORS.orange_100
      },
      tag: {
        label: `${_size(learningPriorities.cards)}`,
        type: 'default',
        size: 'S'
      }
    })
  }))), /*#__PURE__*/React.createElement("div", {
    className: style.container
  }, /*#__PURE__*/React.createElement(SkillPickerModal, {
    skills: skills,
    skillsScore: skillsScore,
    selectedSkills: selectedSkillsList,
    skillsLocales: skillsLocales,
    isOpen: open,
    isLoading: isLoading,
    onCancel: handleCloseSkillPicker,
    onConfirm: handleConfirmSkillPicker,
    onClose: handleCloseSkillPicker
  }), learnerFeature ? /*#__PURE__*/React.createElement("div", {
    "data-name": "skill-focus-container",
    className: style.skillFocusContainer
  }, /*#__PURE__*/React.createElement("header", {
    className: style.skillFocusHeader
  }, /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusHeaderWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusHeaderIcon
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: "bullseye-arrow",
    backgroundColor: COLORS.purple_100,
    borderRadius: "12px",
    size: {
      faSize: 20,
      wrapperSize: 48
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusHeaderContent
  }, /*#__PURE__*/React.createElement("div", {
    "data-name": "skill-focus-title",
    className: style.skillFocusHeaderTitle
  }, translate('skills_focus')), /*#__PURE__*/React.createElement("div", {
    "data-name": "skill-focus-description",
    className: style.skillFocusHeaderDescription
  }, translate('skills_focus_description')))), selectedSkillsList.length >= 3 ? /*#__PURE__*/React.createElement(ChangeSkillFocusButton, {
    onClick: handleOpenSkillPicker
  }) : null), selectedSkillsList.length >= 3 ? /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusContent
  }, /*#__PURE__*/React.createElement("div", {
    className: style.radarContainer
  }, /*#__PURE__*/React.createElement(ResponsiveLearningProfileRadarChart, {
    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: convert(`color(${primarySkinColor} a(0.07))`)
      },
      label: {
        color: '#020202ff'
      }
    }]
  })), /*#__PURE__*/React.createElement(SkillsChartSideInformationPanel, {
    sidePanelItems: skillChartPanelProps
  })) : /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusEmpty
  }, /*#__PURE__*/React.createElement(Picture, {
    className: style.img,
    src: "https://static.coorpacademy.com/assets/images/mylearning-no-skill-selected-placeholder.svg",
    alt: "demo"
  }), /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusEmptyTitle
  }, translate('skills_focus_empty_title')), /*#__PURE__*/React.createElement("div", {
    className: style.skillFocusEmptyDescription
  }, translate('skills_focus_empty_description')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
    label: translate('skills_choose_focus'),
    type: "primary",
    customStyle: {
      width: 'fit-contain',
      backgroundColor: primarySkinColor
    },
    hoverBackgroundColor: convert(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
    onClick: handleOpenSkillPicker
  })))) : null, /*#__PURE__*/React.createElement("header", {
    className: style.skillListHeader
  }, /*#__PURE__*/React.createElement("div", {
    className: style.skillListHeaderIcon
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: "dumbbell",
    backgroundColor: COLORS.yellow_100,
    size: {
      faSize: 20,
      wrapperSize: 48
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: style.skillListHeaderContent
  }, /*#__PURE__*/React.createElement("div", {
    className: style.skillListHeaderTitle
  }, translate('skills_section_title')), /*#__PURE__*/React.createElement("div", {
    className: style.skillListHeaderDescription
  }, translate('skills_section_description'), /*#__PURE__*/React.createElement(ToolTip, {
    fontSize: 12,
    iconContainerClassName: style.infoIconTooltip,
    tooltipClassName: style.tooltip,
    TooltipContent: ReviewTooltipContent,
    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
  })))), /*#__PURE__*/React.createElement("div", {
    className: style.toolBarContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.skillFilterContainer
  }, _keys(filters).map((filter, index) => {
    function handleFilterClick() {
      setActiveFilter(filter);
    }
    return /*#__PURE__*/React.createElement("div", {
      key: index
    }, /*#__PURE__*/React.createElement(FilterButton, {
      active: activeFilter === filter,
      filter: filter === 'all' ? translate('all') : translate('review_mode_available'),
      skillTotal: filters[filter].length,
      onClick: handleFilterClick
    }));
  })), /*#__PURE__*/React.createElement("div", {
    className: style.searchWrapper
  }, /*#__PURE__*/React.createElement(SearchForm, {
    search: {
      placeholder: translate('search_place_holder'),
      value: searchValue,
      onChange: handleSearch
    },
    onReset: handleSearchReset
  }))), searchValue && searchResults.length === 0 ? /*#__PURE__*/React.createElement("div", {
    className: style.emptySearchResultContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.emptySearchResultTitle
  }, translate('empty_search_result_title', {
    searchValue
  })), /*#__PURE__*/React.createElement("div", {
    className: style.emptySearchResultDescription
  }, translate('empty_search_result_description')), /*#__PURE__*/React.createElement("div", {
    className: style.emptySearchResultClearSearch,
    onClick: handleSearchReset
  }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/React.createElement("div", {
    className: style.skillListContainer
  }, activeFilter === 'review' && filters[activeFilter].length === 0 ? /*#__PURE__*/React.createElement("div", {
    className: style.skillListEmptyContainer
  }, /*#__PURE__*/React.createElement(ReviewNoSkills, {
    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
    } = _get([skill, 'icon'], skillsInformation);
    return /*#__PURE__*/React.createElement("div", {
      key: index
    }, /*#__PURE__*/React.createElement(LearnerSkillCard, {
      skillTitle: skillsLocales[skill],
      cardIndex: index,
      focus: selectedSkills.includes(skill),
      metrics: {
        score,
        content,
        questionsToReview
      },
      icon: {
        color,
        name
      },
      onExploreClick: handleExploreSkill
    }));
  }))));
};
MyLearning.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
MyLearning.propTypes = process.env.NODE_ENV !== "production" ? {
  skills: PropTypes.arrayOf(PropTypes.string),
  selectedSkills: PropTypes.arrayOf(PropTypes.string),
  skillsInformation: PropTypes.objectOf(PropTypes.shape({
    availableForReview: PropTypes.bool,
    stats: PropTypes.shape({
      score: PropTypes.number,
      content: PropTypes.number,
      contentCompleted: PropTypes.number,
      questionsToReview: PropTypes.number,
      learningTime: PropTypes.number
    })
  })),
  skillsLocales: PropTypes.objectOf(PropTypes.string),
  learnerFeature: PropTypes.bool,
  isLoading: PropTypes.bool,
  onSkillFocusConfirm: PropTypes.func,
  onExploreSkill: PropTypes.func,
  learningPriorities: PropTypes.shape(CardsList.propTypes)
} : {};
export default MyLearning;
//# sourceMappingURL=index.js.map