"use strict";

exports.__esModule = true;
exports.updateBackgroundImage = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _provider = _interopRequireWildcard(require("../../atom/provider"));
var _progressBar = _interopRequireDefault(require("../progress-bar"));
var _colors = require("../../variables/colors");
var _getBackgroundGradientColor = require("../../util/get-background-gradient-color");
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _propTypes = _interopRequireDefault(require("./prop-types"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
const MAX_SCORE = 100;
const updateBackgroundImage = (ref, background) => {
  if (ref.current) {
    ref.current.style.backgroundImage = background;
  }
};
exports.updateBackgroundImage = updateBackgroundImage;
const LearnerSkillCard = (props, context) => {
  const {
    'aria-label': ariaLabel,
    cardIndex,
    skillTitle,
    skillAriaLabel,
    focus,
    metrics,
    icon,
    onExploreClick
  } = props;
  const {
    score,
    content,
    questionsToReview = 0
  } = metrics;
  const translate = (0, _provider.GetTranslateFromContext)(context);
  const {
    color,
    name
  } = icon;
  const questionsLocale = translate('skill_chart_side_panel_questions_to_review');
  const [badgeIconName, badgeLocale, tagTextColor, tagBackgroundColor] = focus ? ['bullseye-arrow', translate('skill_focus'), _colors.COLORS.purple_700, _colors.COLORS.purple_100] : ['shapes', translate('skill'), _colors.COLORS.neutral_500, _colors.COLORS.cm_grey_100];
  const headerBackgroundRef = (0, _react.useRef)(null);
  const defaultBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '93%', '100%'), [color]);
  const focusBackground = (0, _react.useMemo)(() => (0, _getBackgroundGradientColor.createGradientBackground)(color, '83%', '100%'), [color]);
  const handleMouseEnter = (0, _react.useCallback)(() => {
    updateBackgroundImage(headerBackgroundRef, focusBackground);
  }, [focusBackground]);
  const handleMouseLeave = (0, _react.useCallback)(() => {
    updateBackgroundImage(headerBackgroundRef, defaultBackground);
  }, [defaultBackground]);
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": `learner-skill-card-wrapper-${cardIndex}`,
    onClick: onExploreClick,
    className: _style.default.learnerSkillCardContainer,
    "aria-label": ariaLabel,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": "learner-skill-card-icon-header-wrapper",
    ref: headerBackgroundRef,
    className: _style.default.iconHeaderWrapper,
    style: {
      backgroundImage: defaultBackground,
      color: tagTextColor
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.iconWrapper,
    "data-testid": "learner-skill-card-icon-wrapper"
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: name,
    iconColor: color,
    size: {
      faSize: 20,
      wrapperSize: 44
    },
    borderRadius: '12px',
    gradientBackground: true,
    customStyle: {
      border: '4px solid white'
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.learnerSkillCardContent
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillTitleWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillFocusBadge,
    style: {
      backgroundColor: tagBackgroundColor,
      color: tagTextColor
    }
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: badgeIconName,
    backgroundColor: tagBackgroundColor,
    size: {
      faSize: 10,
      wrapperSize: 16
    }
  }), /*#__PURE__*/_react.default.createElement("span", {
    style: {
      color: tagTextColor
    }
  }, badgeLocale)), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.questionWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "skill-card-title",
    className: _style.default.skillTitle,
    "aria-label": skillAriaLabel || skillTitle
  }, skillTitle), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.contentAndQuestionsWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-name": "learner-skill-card-skill-content-number"
  }, content, " ", translate('content')), questionsToReview ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.skillInformation,
    "data-name": "learner-skill-card-skill-questions-wrapper"
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: 'circle',
    iconColor: _colors.COLORS.cm_grey_400,
    backgroundColor: 'transparent',
    size: {
      faSize: 4,
      wrapperSize: 0
    }
  }), /*#__PURE__*/_react.default.createElement("span", {
    "data-name": "learner-skill-card-questions-to-review"
  }, questionsToReview), "\xA0", questionsLocale) : null)))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.progressInformations
  }, /*#__PURE__*/_react.default.createElement(_progressBar.default, {
    value: score,
    displayInfo: false,
    max: MAX_SCORE,
    className: _style.default.progressWrapper,
    style: {
      backgroundColor: _colors.COLORS.cm_positive_500
    }
  })));
};
LearnerSkillCard.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
var _default = exports.default = LearnerSkillCard;
//# sourceMappingURL=index.js.map