import _get from "lodash/fp/get";
import _map from "lodash/fp/map";
import _isEmpty from "lodash/fp/isEmpty";
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); }
import React, { useCallback, useState } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { convert } from 'css-color-function';
import Title from '../../atom/title';
import ProgressBar from '../progress-bar';
import { COLORS } from '../../variables/colors';
import Tag from '../../atom/tag';
import ButtonLink from '../../atom/button-link';
import Icon from '../../atom/icon';
import Provider, { GetSkinFromContext } from '../../atom/provider';
// eslint-disable-next-line css-modules/no-unused-class
import style from './style.css';
const uncappedMap = _map.convert({
  cap: false
});
const DetailSection = ({
  index,
  type,
  isLocked,
  downloadUrl,
  stars
}, context) => {
  const {
    translate
  } = context;
  const skin = GetSkinFromContext(context);
  const primarySkinColor = _get('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: 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.white,
    icon: {
      position: 'left',
      faIcon: {
        name: 'download',
        color: primarySkinColor,
        size: 14,
        customStyle: {
          padding: 0
        }
      }
    },
    disabled: isLocked
  };
  return isTypeStars ? /*#__PURE__*/React.createElement("div", {
    className: style[`detailsSection${index}`],
    "data-name": type,
    "aria-label": `${type} informations`
  }, /*#__PURE__*/React.createElement("div", {
    className: style.detailsInfo
  }, /*#__PURE__*/React.createElement("div", {
    className: style.detailsInfoText
  }, /*#__PURE__*/React.createElement("span", {
    className: style.detailsTitle
  }, translate('bonus_stars'))), /*#__PURE__*/React.createElement("div", {
    className: style.stars
  }, /*#__PURE__*/React.createElement(Icon, {
    iconName: "star",
    iconColor: "#FFCE0A",
    backgroundColor: "#FFF9D1",
    preset: "xl"
  }), /*#__PURE__*/React.createElement("span", null, stars)))) : /*#__PURE__*/React.createElement("div", {
    className: style[`detailsSection${index}`],
    "data-name": type,
    "aria-label": `${type} informations`
  }, /*#__PURE__*/React.createElement("img", {
    className: style.img,
    src: type === 'badge' ? downloadUrl : 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
  }), /*#__PURE__*/React.createElement("div", {
    className: style.detailsInfo
  }, /*#__PURE__*/React.createElement("div", {
    className: style.detailsInfoText
  }, /*#__PURE__*/React.createElement("span", {
    className: style.detailsTitle
  }, type === 'diploma' ? translate('diploma') : translate('badge'))), /*#__PURE__*/React.createElement("div", {
    className: style.buttonContainer
  }, /*#__PURE__*/React.createElement(ButtonLink, 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] = useState(false);
  const handleToggleDetails = useCallback(() => {
    setShowDetails(!showDetails);
  }, [showDetails]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-name": "prgress-wrapper",
    "aria-label": "progress wrapper section"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.titleContainer
  }, /*#__PURE__*/React.createElement(Title, {
    type: "form-group",
    titleSize: "medium",
    title: title,
    subtitle: subtitle
  })), /*#__PURE__*/React.createElement("div", {
    className: style.statscontainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.stats
  }, /*#__PURE__*/React.createElement("div", {
    // eslint-disable-next-line react/no-danger
    dangerouslySetInnerHTML: {
      __html: mandatoryCompletedModulesLocale
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: style.progression
  }, /*#__PURE__*/React.createElement("span", {
    className: style.statsNumber,
    "data-name": "progress-value"
  }, progression, "%"))), /*#__PURE__*/React.createElement(ProgressBar, {
    className: style.customProgressBar,
    style: {
      backgroundColor: COLORS.cm_positive_500
    },
    displayInfo: false,
    value: progression,
    max: 100
  }), /*#__PURE__*/React.createElement("div", {
    className: style.statsProgressionMobile
  }, /*#__PURE__*/React.createElement("span", {
    className: style.statsNumber
  }, progression, "%")), !_isEmpty(sections) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: style.toggleDetailsButton,
    onClick: handleToggleDetails,
    "data-testid": "progress-wrapper-toggle-details-button"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.toggleDetailsLabel
  }, /*#__PURE__*/React.createElement("span", {
    className: style.toggleDetailsTitle
  }, translate('rewards')), isLocked ? /*#__PURE__*/React.createElement(Tag, {
    label: translate('locked'),
    size: "S",
    icon: {
      position: 'left',
      iconName: 'lock',
      iconColor: COLORS.cm_grey_500,
      preset: 's',
      customStyle: {
        padding: 0
      }
    }
  }) : null), /*#__PURE__*/React.createElement(Icon, {
    iconColor: COLORS.cm_grey_700,
    iconName: showDetails ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 20,
      wrapperSize: 24
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: classNames(style.details, showDetails ? style.visibleDetails : style.hiddenDetails),
    "data-testid": "progress-wrapper-details"
  }, uncappedMap((section, index) => /*#__PURE__*/React.createElement(DetailSection, _extends({}, section, {
    isLocked: isLocked,
    key: `${section.type}-${index}`,
    index: index
  })), sections))) : null);
};
const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),
  downloadUrl: PropTypes.string,
  stars: PropTypes.number
} : {};
DetailSection.contextTypes = {
  translate: Provider.childContextTypes.translate,
  skin: Provider.childContextTypes.skin
};
DetailSection.propTypes = process.env.NODE_ENV !== "production" ? {
  index: PropTypes.number,
  isLocked: PropTypes.bool,
  ...commonDetailSectionPropTypes
} : {};
ProgressWrapper.contextTypes = {
  translate: Provider.childContextTypes.translate
};
ProgressWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  completedModules: PropTypes.number,
  mandatoryModules: PropTypes.number,
  progression: PropTypes.number,
  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))
} : {};
export default ProgressWrapper;
//# sourceMappingURL=index.js.map