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 } from 'react';
import get from 'lodash/fp/get';
import isEmpty from 'lodash/fp/isEmpty';
import map from 'lodash/fp/map';
import noop from 'lodash/fp/noop';
import omit from 'lodash/fp/omit';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Provider, { GetSkinFromContext } from '../../atom/provider';
import Button from '../../atom/button';
import Select from '../../atom/select';
import Loader from '../../atom/loader';
import ProgressionItem from './progression-item';
import EngineStars from './engine-stars';
import StarsSummary from './stars-summary';
import style from './style.css';
const mapWithIndex = map.convert({
  cap: false
});
const Progression = (props, legacyContext) => {
  const {
    mainTitle,
    mainSubtitle,
    recommendation = {},
    progressions = [],
    adaptiveAriaLabel,
    total,
    engines = [],
    themeFilter = {},
    loading,
    'aria-label': ariaLabel
  } = props;
  const skin = GetSkinFromContext(legacyContext);
  const {
    onChange: themeFilterOnChange
  } = themeFilter;
  const handleClick = useCallback(e => {
    e.stopPropagation();
    e.preventDefault();
    const {
      onClick = noop
    } = recommendation;
    onClick(e);
  }, [recommendation]);
  const handleSelectTheme = useCallback(e => {
    themeFilterOnChange && themeFilterOnChange(e);
  }, [themeFilterOnChange]);
  const primary = get('common.primary', skin);
  const loader = loading ? /*#__PURE__*/React.createElement("div", {
    className: style.loader
  }, /*#__PURE__*/React.createElement(Loader, null)) : null;
  const allProgressions = mapWithIndex((progression, index) => /*#__PURE__*/React.createElement(ProgressionItem, _extends({}, omit(['ref'], progression), {
    key: `${index}-${progression.ref}`,
    adaptiveAriaLabel: adaptiveAriaLabel
  })), progressions);
  const coreProgression = /*#__PURE__*/React.createElement("div", {
    "data-name": "activityCore",
    className: style.core
  }, allProgressions);
  const themeSelect = !isEmpty(themeFilter.options) ? /*#__PURE__*/React.createElement(Select, {
    borderClassName: style.selectBorder,
    className: style.select,
    theme: "thematiques",
    options: themeFilter.options,
    onChange: handleSelectTheme,
    "aria-label": ariaLabel
  }) : null;
  const recommendationSection = !isEmpty(recommendation) ? /*#__PURE__*/React.createElement("div", {
    className: style.recommendationWrapper
  }, /*#__PURE__*/React.createElement("p", {
    className: style.recommendationSection
  }, recommendation.title, " "), /*#__PURE__*/React.createElement("p", {
    className: style.recommendationSection
  }, /*#__PURE__*/React.createElement("span", null, recommendation.subtitle, " "), /*#__PURE__*/React.createElement("span", {
    className: classnames(style.course, style.innerHTML)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: recommendation.courseTitle
    }
  })), /*#__PURE__*/React.createElement(Button, {
    type: "link",
    onClick: handleClick,
    submitValue: recommendation.cta,
    style: {
      backgroundColor: primary
    },
    className: style.cta,
    "data-testid": "button-link-recommendation"
  })) : null;
  return /*#__PURE__*/React.createElement("div", {
    className: style.defaultStyle
  }, /*#__PURE__*/React.createElement("div", {
    "data-name": "activity-header",
    tabIndex: 0
  }, /*#__PURE__*/React.createElement("div", {
    className: style.mainTitle,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement("span", null, mainTitle), " ", mainSubtitle), /*#__PURE__*/React.createElement("div", {
    className: style.headerProgression,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement("div", {
    className: style.wrapperCta,
    tabIndex: 0
  }, themeSelect, recommendationSection), /*#__PURE__*/React.createElement(StarsSummary, {
    engines: engines,
    total: total
  }))), /*#__PURE__*/React.createElement("div", {
    className: style.wrapperProgression,
    "data-name": "activityList"
  }, coreProgression, loader));
};
Progression.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
Progression.propTypes = process.env.NODE_ENV !== "production" ? {
  mainTitle: PropTypes.string.isRequired,
  mainSubtitle: PropTypes.string.isRequired,
  adaptiveAriaLabel: PropTypes.string,
  total: PropTypes.shape({
    label: PropTypes.string.isRequired,
    stars: PropTypes.number.isRequired
  }).isRequired,
  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),
  loading: PropTypes.bool.isRequired,
  progressions: PropTypes.arrayOf(PropTypes.shape({
    ...ProgressionItem.propTypes,
    ref: PropTypes.string.isRequired
  })),
  themeFilter: PropTypes.shape({
    options: Select.propTypes.options.isRequired,
    onChange: Select.propTypes.onChange
  }),
  recommendation: PropTypes.shape({
    cta: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    subtitle: PropTypes.string.isRequired,
    courseTitle: PropTypes.string.isRequired,
    onClick: PropTypes.func
  }),
  'aria-label': PropTypes.string
} : {};
export default Progression;
//# sourceMappingURL=index.js.map