"use strict";

exports.__esModule = true;
exports.default = void 0;
var _get2 = _interopRequireDefault(require("lodash/fp/get"));
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _cssColorFunction = require("css-color-function");
var _title = _interopRequireDefault(require("../../atom/title"));
var _progressBar = _interopRequireDefault(require("../progress-bar"));
var _colors = require("../../variables/colors");
var _tag = _interopRequireDefault(require("../../atom/tag"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _icon = _interopRequireDefault(require("../../atom/icon"));
var _provider = _interopRequireWildcard(require("../../atom/provider"));
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 }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // eslint-disable-next-line css-modules/no-unused-class
const uncappedMap = _map2.default.convert({
  cap: false
});
const DetailSection = ({
  index,
  type,
  isLocked,
  downloadUrl,
  stars
}, context) => {
  const {
    translate
  } = context;
  const skin = (0, _provider.GetSkinFromContext)(context);
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
  const isTypeStars = type === 'stars';
  const downloadButtonProps = {
    label: translate('download'),
    link: {
      target: '_blank',
      href: downloadUrl
    },
    'data-name': `download-${type}-button`,
    'aria-label': `download ${type} button`,
    customStyle: {
      backgroundColor: (0, _cssColorFunction.convert)(`color(${primarySkinColor} a(0.07))`),
      color: primarySkinColor,
      width: 'auto',
      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
    },
    hoverBackgroundColor: primarySkinColor,
    hoverColor: _colors.COLORS.white,
    icon: {
      position: 'left',
      faIcon: {
        name: 'download',
        color: primarySkinColor,
        size: 14,
        customStyle: {
          padding: 0
        }
      }
    },
    disabled: isLocked
  };
  return isTypeStars ? /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default[`detailsSection${index}`],
    "data-name": type,
    "aria-label": `${type} informations`
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.detailsInfo
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.detailsInfoText
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.detailsTitle
  }, translate('bonus_stars'))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.stars
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconName: "star",
    iconColor: "#FFCE0A",
    backgroundColor: "#FFF9D1",
    preset: "xl"
  }), /*#__PURE__*/_react.default.createElement("span", null, stars)))) : /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default[`detailsSection${index}`],
    "data-name": type,
    "aria-label": `${type} informations`
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: _style.default.img,
    src: type === 'badge' ? downloadUrl : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.detailsInfo
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.detailsInfoText
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.detailsTitle
  }, type === 'diploma' ? translate('diploma') : translate('badge'))), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.buttonContainer
  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, downloadButtonProps))));
};
const ProgressWrapper = ({
  completedModules,
  mandatoryModules,
  title,
  subtitle,
  progression,
  sections
}, context) => {
  const {
    translate
  } = context;
  const mandatoryCompletedModulesLocale = translate('modules_completed_mandatory', {
    total: mandatoryModules,
    count: completedModules > mandatoryModules ? mandatoryModules : completedModules
  });
  const isLocked = progression !== 100;
  const [showDetails, setShowDetails] = (0, _react.useState)(false);
  const handleToggleDetails = (0, _react.useCallback)(() => {
    setShowDetails(!showDetails);
  }, [showDetails]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.container,
    "data-name": "prgress-wrapper",
    "aria-label": "progress wrapper section"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.titleContainer
  }, /*#__PURE__*/_react.default.createElement(_title.default, {
    type: "form-group",
    titleSize: "medium",
    title: title,
    subtitle: subtitle
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.statscontainer
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.stats
  }, /*#__PURE__*/_react.default.createElement("div", {
    // eslint-disable-next-line react/no-danger
    dangerouslySetInnerHTML: {
      __html: mandatoryCompletedModulesLocale
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.progression
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.statsNumber,
    "data-name": "progress-value"
  }, progression, "%"))), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
    className: _style.default.customProgressBar,
    style: {
      backgroundColor: _colors.COLORS.cm_positive_500
    },
    displayInfo: false,
    value: progression,
    max: 100
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.statsProgressionMobile
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.statsNumber
  }, progression, "%")), !(0, _isEmpty2.default)(sections) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.toggleDetailsButton,
    onClick: handleToggleDetails,
    "data-testid": "progress-wrapper-toggle-details-button"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _style.default.toggleDetailsLabel
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _style.default.toggleDetailsTitle
  }, translate('rewards')), isLocked ? /*#__PURE__*/_react.default.createElement(_tag.default, {
    label: translate('locked'),
    size: "S",
    icon: {
      position: 'left',
      iconName: 'lock',
      iconColor: _colors.COLORS.cm_grey_500,
      preset: 's',
      customStyle: {
        padding: 0
      }
    }
  }) : null), /*#__PURE__*/_react.default.createElement(_icon.default, {
    iconColor: _colors.COLORS.cm_grey_700,
    iconName: showDetails ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 20,
      wrapperSize: 24
    }
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.details, showDetails ? _style.default.visibleDetails : _style.default.hiddenDetails),
    "data-testid": "progress-wrapper-details"
  }, uncappedMap((section, index) => /*#__PURE__*/_react.default.createElement(DetailSection, _extends({}, section, {
    isLocked: isLocked,
    key: `${section.type}-${index}`,
    index: index
  })), sections))) : null);
};
const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
  type: _propTypes.default.oneOf(['diploma', 'badge', 'stars']),
  downloadUrl: _propTypes.default.string,
  stars: _propTypes.default.number
} : {};
DetailSection.contextTypes = {
  translate: _provider.default.childContextTypes.translate,
  skin: _provider.default.childContextTypes.skin
};
DetailSection.propTypes = process.env.NODE_ENV !== "production" ? {
  index: _propTypes.default.number,
  isLocked: _propTypes.default.bool,
  ...commonDetailSectionPropTypes
} : {};
ProgressWrapper.contextTypes = {
  translate: _provider.default.childContextTypes.translate
};
ProgressWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
  title: _propTypes.default.string,
  subtitle: _propTypes.default.string,
  completedModules: _propTypes.default.number,
  mandatoryModules: _propTypes.default.number,
  progression: _propTypes.default.number,
  sections: _propTypes.default.arrayOf(_propTypes.default.shape(commonDetailSectionPropTypes))
} : {};
var _default = exports.default = ProgressWrapper;
//# sourceMappingURL=index.js.map