"use strict";

exports.__esModule = true;
exports.default = void 0;
var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
var _round2 = _interopRequireDefault(require("lodash/fp/round"));
var _compact2 = _interopRequireDefault(require("lodash/fp/compact"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _tag = _interopRequireDefault(require("../../atom/tag"));
var _select = require("../../atom/select");
var _buttonLinkIcon = _interopRequireDefault(require("../../atom/button-link-icon"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
var _allCourses = _interopRequireDefault(require("../skill-detail/all-courses"));
var _skillDetail = require("../skill-detail");
var _progressWrapper = _interopRequireDefault(require("../../molecule/progress-wrapper"));
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 }; }
const CertificationDetail = (props, context) => {
  const {
    certificationRef,
    title,
    tag,
    description,
    certificationCourses,
    ongoingCoursesAvailable,
    filters,
    onBackClick,
    onContinueLearningClick,
    metrics,
    logoUrl,
    diplomaUrl,
    badgeUrl,
    search
  } = props;
  const descriptionRef = (0, _react.useRef)(null);
  const {
    translate
  } = context;
  const {
    progression,
    mandatoryModules,
    stars,
    totalModules
  } = metrics;
  const [isDescriptionTruncated, setIsDescriptionTruncated] = (0, _react.useState)(false);
  const [showMore, setShowMore] = (0, _react.useState)(false);
  const handleShowMore = (0, _react.useCallback)(() => setShowMore(!showMore), [setShowMore, showMore]);
  (0, _react.useEffect)(() => {
    if (descriptionRef.current) {
      const {
        clientHeight = 0,
        scrollHeight = 0
      } = descriptionRef.current;
      setIsDescriptionTruncated(scrollHeight > clientHeight);
    }
  }, [description]);
  const Description = (0, _react.useCallback)(() => {
    return /*#__PURE__*/_react.default.createElement("div", {
      ref: descriptionRef,
      className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
    }, /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description));
  }, [showMore, description]);
  const completedModules = (0, _react.useMemo)(() => (0, _round2.default)(mandatoryModules * progression / 100), [mandatoryModules, progression]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.backgroundContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.container,
    "data-name": certificationRef
  }, !(0, _isNil2.default)(onBackClick) ? /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, {
    faIcon: "arrow-left",
    "data-name": "back-button",
    "aria-label": translate('back'),
    onClick: onBackClick,
    className: _style.default.backButton,
    tooltipPlacement: "right"
  }) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.ctaContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.logoContainer
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: _style.default.logo,
    src: logoUrl
  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: tag
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.title
  }, title), description ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.showMoreWrapper,
    onClick: handleShowMore
  }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: showMore ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 14,
      wrapperSize: 16
    }
  })) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.contentStats
  }, /*#__PURE__*/_react.default.createElement("span", null, `${translate('modules', {
    count: totalModules
  })}`)), /*#__PURE__*/_react.default.createElement(_skillDetail.ContinueLearningButton, {
    ongoingCoursesAvailable: ongoingCoursesAvailable,
    onClick: onContinueLearningClick
  }))), /*#__PURE__*/_react.default.createElement(_progressWrapper.default, {
    title: translate('your_progress'),
    subtitle: translate('certification_progress_wrapper_subtitle'),
    progression: progression,
    completedModules: completedModules,
    mandatoryModules: mandatoryModules,
    sections: (0, _compact2.default)([diplomaUrl && {
      type: 'diploma',
      downloadUrl: diplomaUrl
    }, badgeUrl && {
      type: 'badge',
      downloadUrl: badgeUrl
    }, stars && {
      type: 'stars',
      stars
    }])
  }), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
    content: certificationCourses,
    filters: filters,
    "data-name": "certification-courses",
    search: search
  })));
};
CertificationDetail.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string.isRequired,
  tag: _propTypes.default.string,
  certificationRef: _propTypes.default.string.isRequired,
  description: _propTypes.default.string.isRequired,
  logoUrl: _propTypes.default.string,
  metrics: _propTypes.default.shape({
    progression: _propTypes.default.number,
    stars: _propTypes.default.number,
    mandatoryModules: _propTypes.default.number,
    totalModules: _propTypes.default.number
  }),
  diplomaUrl: _propTypes.default.string,
  badgeUrl: _propTypes.default.string,
  ongoingCoursesAvailable: _propTypes.default.bool,
  certificationCourses: _propTypes.default.shape(_cardsGrid.default.propTypes),
  filters: _propTypes.default.shape({
    onChange: _propTypes.default.func,
    options: _propTypes.default.arrayOf(_propTypes.default.shape(_select.SelectOptionPropTypes))
  }),
  onBackClick: _propTypes.default.func,
  onContinueLearningClick: _propTypes.default.func,
  search: _propTypes.default.shape({
    oldValue: _propTypes.default.string,
    onChange: _propTypes.default.func
  })
} : {};
var _default = exports.default = CertificationDetail;
//# sourceMappingURL=index.js.map