"use strict";

exports.__esModule = true;
exports.default = exports.ContinueLearningButton = void 0;
var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
var _cssColorFunction = require("css-color-function");
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _buttonLinkIcon = _interopRequireDefault(require("../../atom/button-link-icon"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _iconPreview = _interopRequireDefault(require("../../molecule/icon-preview"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
var _colors = require("../../variables/colors");
var _select = require("../../atom/select");
var _allCourses = _interopRequireDefault(require("./all-courses"));
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 ContinueLearningButton = (props, context) => {
  const {
    ongoingCoursesAvailable,
    onClick
  } = props;
  const {
    skin,
    translate
  } = context;
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
  return /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
    label: ongoingCoursesAvailable ? translate('continue_learning') : translate('start_learning'),
    type: "primary",
    customStyle: {
      width: 'fit-content',
      borderRadius: '12px',
      backgroundColor: primarySkinColor
    },
    hoverBackgroundColor: (0, _cssColorFunction.convert)(`hsl(from ${primarySkinColor} h s calc(l*(1 - 0.08)))`),
    hoverColor: _colors.COLORS.white,
    icon: {
      position: 'left',
      faIcon: {
        name: 'play',
        color: _colors.COLORS.white,
        size: 14
      }
    },
    onClick: onClick
  });
};
exports.ContinueLearningButton = ContinueLearningButton;
ContinueLearningButton.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
ContinueLearningButton.propTypes = process.env.NODE_ENV !== "production" ? {
  ongoingCoursesAvailable: _propTypes.default.bool,
  onClick: _propTypes.default.func
} : {};
const SkillDetail = (props, context) => {
  const {
    title,
    icon: {
      color: iconColor,
      name: iconName
    },
    skillRef,
    description,
    metrics = {},
    focused,
    availableForReview,
    ongoingCoursesAvailable,
    skillIncludedCourses,
    filters,
    onBackClick,
    onReviewClick,
    onContinueLearningClick,
    search,
    bannerMicrolearning
  } = props;
  const {
    score = 0,
    questionsToReview = 0,
    totalContents = 0
  } = metrics;
  const {
    translate
  } = context;
  const bannerMicrolearningAction = bannerMicrolearning?.action;
  const descriptionRef = (0, _react.useRef)(null);
  const [isDescriptionTruncated, setIsDescriptionTruncated] = (0, _react.useState)(false);
  const [showMore, setShowMore] = (0, _react.useState)(false);
  const handleShowMore = (0, _react.useCallback)(() => {
    setShowMore(!showMore);
  }, [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,
      "data-testid": "skill-description",
      className: (0, _classnames.default)(_style.default.description, !showMore && _style.default.truncate)
    }, description ? /*#__PURE__*/_react.default.createElement(_markdownToJsx.default, null, description) : null);
  }, [showMore, description]);
  const ProgressBar = (0, _react.useCallback)(() => {
    if (typeof score !== 'number') return null;
    const progressBarColor = _colors.COLORS.cm_positive_500;
    const inlineProgressStyle = {
      backgroundColor: progressBarColor,
      width: `${score}%`
    };
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.progressBarRow
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _style.default.progressBarWrapper
    }, /*#__PURE__*/_react.default.createElement("div", {
      "data-name": "progress",
      className: _style.default.progress,
      style: inlineProgressStyle,
      role: "progressbar",
      "aria-valuenow": score,
      "aria-valuemin": 0,
      "aria-valuemax": 100
    })), /*#__PURE__*/_react.default.createElement("span", {
      className: _style.default.progressInformationNumber
    }, score.toFixed(1), "%"));
  }, [score]);
  const hasDescription = Boolean(description && description.trim().length > 0);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.backgroundContainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.container,
    "data-name": skillRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.topSection
  }, !(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.mainSection
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.leftSide
  }, /*#__PURE__*/_react.default.createElement(_iconPreview.default, {
    icon: {
      name: iconName,
      color: iconColor
    },
    title: title,
    customStyle: {
      gap: 24,
      padding: '50px 49px 50px 50px'
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.rightSide
  }, focused ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusBadge
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "bullseye-arrow",
    backgroundColor: _colors.COLORS.purple_100,
    size: {
      faSize: 10,
      wrapperSize: 16
    }
  }), translate('skill_focus')) : /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillBadge
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "shapes",
    backgroundColor: _colors.COLORS.cm_grey_100,
    size: {
      faSize: 10,
      wrapperSize: 16
    }
  }), translate('skill')), /*#__PURE__*/_react.default.createElement("h2", {
    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
  }, showMore ? translate('Show less') : translate('Show more'), /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: showMore ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 14,
      wrapperSize: 14
    },
    customStyle: {
      padding: '8px'
    }
  })) : null), questionsToReview > 0 ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillInformation
  }, /*#__PURE__*/_react.default.createElement("span", null, questionsToReview), "\xA0", translate('skill_chart_side_panel_questions_to_review')) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.progressContainer, !hasDescription && _style.default.noDescriptionSpacing)
  }, /*#__PURE__*/_react.default.createElement(ProgressBar, null)), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.ctaWrapper
  }, /*#__PURE__*/_react.default.createElement(ContinueLearningButton, {
    ongoingCoursesAvailable: ongoingCoursesAvailable,
    onClick: onContinueLearningClick
  }), /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
    type: "secondary",
    label: translate('review_this_skill'),
    disabled: !availableForReview,
    onClick: onReviewClick,
    icon: {
      position: 'left',
      faIcon: {
        name: 'rotate-right',
        color: _colors.COLORS.cm_grey_700,
        size: 14
      }
    },
    customStyle: {
      borderRadius: '12px',
      width: 'fit-content'
    }
  })))), /*#__PURE__*/_react.default.createElement(_allCourses.default, {
    content: skillIncludedCourses,
    filters: filters,
    totalContents: totalContents,
    bannerMicrolearning: bannerMicrolearning && bannerMicrolearningAction ? {
      type: 'skill',
      action: bannerMicrolearningAction,
      oldSwitchValue: bannerMicrolearning.oldSwitchValue
    } : undefined,
    search: search
  })));
};
SkillDetail.contextTypes = {
  translate: _provider.default.childContextTypes.translate,
  skin: _provider.default.childContextTypes.skin
};
SkillDetail.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string.isRequired,
  icon: _propTypes.default.shape({
    name: _propTypes.default.string,
    color: _propTypes.default.string
  }).isRequired,
  skillRef: _propTypes.default.string.isRequired,
  description: _propTypes.default.string,
  metrics: _propTypes.default.shape({
    score: _propTypes.default.number,
    questionsToReview: _propTypes.default.number,
    totalContents: _propTypes.default.number
  }),
  focused: _propTypes.default.bool,
  availableForReview: _propTypes.default.bool,
  ongoingCoursesAvailable: _propTypes.default.bool,
  skillIncludedCourses: _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,
  onReviewClick: _propTypes.default.func,
  onContinueLearningClick: _propTypes.default.func,
  search: _propTypes.default.shape({
    oldValue: _propTypes.default.string,
    onChange: _propTypes.default.func
  }),
  bannerMicrolearning: _propTypes.default.shape({
    action: _propTypes.default.func,
    oldSwitchValue: _propTypes.default.bool
  })
} : {};
var _default = exports.default = SkillDetail;
//# sourceMappingURL=index.js.map