"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _colors = require("../../variables/colors");
var _provider = _interopRequireDefault(require("../../atom/provider"));
var _tag = _interopRequireDefault(require("../../atom/tag"));
var _progressBar = _interopRequireDefault(require("../progress-bar"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const CertificationCard = (props, context) => {
  const {
    label,
    locales: {
      conditionDescriptionProgress,
      tag
    },
    goal: {
      title
    },
    progress,
    imgUrl,
    onClick
  } = props;
  const {
    translate
  } = context;
  const isInprogress = progress < 100;
  const progressLabel = isInprogress ? translate('in_progress') : translate('completed');
  const progressTagType = isInprogress ? 'progress' : 'success';
  const progressIconProps = {
    position: 'left',
    iconName: isInprogress ? 'clock' : 'circle-check',
    iconColor: isInprogress ? '#B87A00' : '#05944F',
    backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',
    size: {
      faSize: 10,
      wrapperSize: 10
    },
    customStyle: {
      padding: 0
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.container,
    "data-name": `certification-card-${label}`,
    onClick: onClick
  }, progress > 0 ? /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: progressLabel,
    type: progressTagType,
    customStyle: {
      position: 'absolute',
      top: '12px',
      right: '12px'
    },
    icon: progressIconProps
  }) : null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.imageSection
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.imageContainer
  }, /*#__PURE__*/_react.default.createElement("img", {
    src: imgUrl
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.detailWrapper
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.titleWrapper
  }, /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: tag,
    size: "S"
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.title,
    "data-name": "certification-title"
  }, title), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.moduleCount
  }, conditionDescriptionProgress)), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
    className: _style.default.customProgressBar,
    style: {
      backgroundColor: _colors.COLORS.cm_positive_500
    },
    displayInfo: false,
    value: progress,
    max: 100
  })));
};
CertificationCard.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
CertificationCard.propTypes = process.env.NODE_ENV !== "production" ? {
  label: _propTypes.default.string,
  goal: _propTypes.default.shape({
    title: _propTypes.default.string,
    condition: _propTypes.default.shape({
      nbDone: _propTypes.default.number
    })
  }),
  progress: _propTypes.default.number,
  imgUrl: _propTypes.default.string,
  onClick: _propTypes.default.func,
  locales: _propTypes.default.shape({
    conditionDescriptionProgress: _propTypes.default.string,
    tag: _propTypes.default.string
  })
} : {};
var _default = exports.default = CertificationCard;
//# sourceMappingURL=index.js.map