import _get from "lodash/fp/get";
import React from 'react';
import { convert } from 'css-color-function';
import Provider, { GetTranslateFromContext, GetSkinFromContext } from '../../atom/provider';
import Tag from '../../atom/tag';
import ButtonLink from '../../atom/button-link';
import CircularProgressBar from '../../atom/circular-progress-bar';
import { propTypes } from './types';
import style from './style.css';
const LearningPriorityCard = (props, context) => {
  const {
    tagLabel,
    title,
    progression,
    onClick
  } = props;
  const translate = GetTranslateFromContext(context);
  const skin = GetSkinFromContext(context);
  const exploreLocale = translate('Explore');
  const primarySkinColor = _get('common.primary', skin);
  const buttonExploreProps = {
    customStyle: {
      backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
      color: primarySkinColor,
      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
    },
    hoverBackgroundColor: primarySkinColor,
    hoverColor: '#FFFFFF',
    onClick,
    'aria-label': `${title}, ${exploreLocale}`,
    label: exploreLocale,
    'data-name': 'learning-priority-explore-button',
    icon: {
      position: 'left',
      faIcon: {
        name: 'compass',
        backgroundColor: convert(`color(${primarySkinColor} a(0.07))`),
        color: primarySkinColor,
        size: 16
      }
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "aria-label": `learning priority card ${title}`,
    "data-name": `learning-priority-card-${title}`
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
    label: tagLabel,
    size: 'S'
  })), /*#__PURE__*/React.createElement("div", {
    className: style.title
  }, title), /*#__PURE__*/React.createElement("div", {
    className: style.circularProgressBarContainer
  }, /*#__PURE__*/React.createElement(CircularProgressBar, {
    size: 162,
    strokeWidth: 12,
    progression,
    label: translate('completed'),
    'aria-label': `${title} ${progression}%`,
    'data-name': `circular-progress-bar-${title}`
  })), /*#__PURE__*/React.createElement("div", {
    "data-name": "button-explore-wrapper"
  }, /*#__PURE__*/React.createElement(ButtonLink, buttonExploreProps)));
};
LearningPriorityCard.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
LearningPriorityCard.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
export default LearningPriorityCard;
//# sourceMappingURL=index.js.map