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