import _isNil from "lodash/fp/isNil";
import _round from "lodash/fp/round";
import _compact from "lodash/fp/compact";
import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Markdown from 'markdown-to-jsx';
import Provider from '../../atom/provider';
import Tag from '../../atom/tag';
import { SelectOptionPropTypes } from '../../atom/select';
import ButtonLinkIcon from '../../atom/button-link-icon';
import Icon from '../../atom/icon';
import CardsGrid from '../../organism/cards-grid';
import AllCourses from '../skill-detail/all-courses';
import { ContinueLearningButton } from '../skill-detail';
import ProgressWrapper from '../../molecule/progress-wrapper';
import style from './style.css';
const CertificationDetail = (props, context) => {
  const {
    certificationRef,
    title,
    tag,
    description,
    certificationCourses,
    ongoingCoursesAvailable,
    filters,
    onBackClick,
    onContinueLearningClick,
    metrics,
    logoUrl,
    diplomaUrl,
    badgeUrl,
    search
  } = props;
  const descriptionRef = useRef(null);
  const {
    translate
  } = context;
  const {
    progression,
    mandatoryModules,
    stars,
    totalModules
  } = metrics;
  const [isDescriptionTruncated, setIsDescriptionTruncated] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const handleShowMore = useCallback(() => setShowMore(!showMore), [setShowMore, showMore]);
  useEffect(() => {
    if (descriptionRef.current) {
      const {
        clientHeight = 0,
        scrollHeight = 0
      } = descriptionRef.current;
      setIsDescriptionTruncated(scrollHeight > clientHeight);
    }
  }, [description]);
  const Description = useCallback(() => {
    return /*#__PURE__*/React.createElement("div", {
      ref: descriptionRef,
      className: classnames(style.description, !showMore && style.truncate)
    }, /*#__PURE__*/React.createElement(Markdown, null, description));
  }, [showMore, description]);
  const completedModules = useMemo(() => _round(mandatoryModules * progression / 100), [mandatoryModules, progression]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.backgroundContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.container,
    "data-name": certificationRef
  }, !_isNil(onBackClick) ? /*#__PURE__*/React.createElement(ButtonLinkIcon, {
    faIcon: "arrow-left",
    "data-name": "back-button",
    "aria-label": translate('back'),
    onClick: onBackClick,
    className: style.backButton,
    tooltipPlacement: "right"
  }) : null, /*#__PURE__*/React.createElement("div", {
    className: style.ctaContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.logoContainer
  }, /*#__PURE__*/React.createElement("img", {
    className: style.logo,
    src: logoUrl
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
    label: tag
  }), /*#__PURE__*/React.createElement("div", {
    className: style.title
  }, title), description ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null), isDescriptionTruncated ? /*#__PURE__*/React.createElement("div", {
    className: style.showMoreWrapper,
    onClick: handleShowMore
  }, translate(showMore ? 'Show less' : 'Show more'), /*#__PURE__*/React.createElement(Icon, {
    iconName: showMore ? 'chevron-up' : 'chevron-down',
    size: {
      faSize: 14,
      wrapperSize: 16
    }
  })) : null) : null, /*#__PURE__*/React.createElement("div", {
    className: style.contentStats
  }, /*#__PURE__*/React.createElement("span", null, `${translate('modules', {
    count: totalModules
  })}`)), /*#__PURE__*/React.createElement(ContinueLearningButton, {
    ongoingCoursesAvailable: ongoingCoursesAvailable,
    onClick: onContinueLearningClick
  }))), /*#__PURE__*/React.createElement(ProgressWrapper, {
    title: translate('your_progress'),
    subtitle: translate('certification_progress_wrapper_subtitle'),
    progression: progression,
    completedModules: completedModules,
    mandatoryModules: mandatoryModules,
    sections: _compact([diplomaUrl && {
      type: 'diploma',
      downloadUrl: diplomaUrl
    }, badgeUrl && {
      type: 'badge',
      downloadUrl: badgeUrl
    }, stars && {
      type: 'stars',
      stars
    }])
  }), /*#__PURE__*/React.createElement(AllCourses, {
    content: certificationCourses,
    filters: filters,
    "data-name": "certification-courses",
    search: search
  })));
};
CertificationDetail.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
CertificationDetail.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string.isRequired,
  tag: PropTypes.string,
  certificationRef: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  logoUrl: PropTypes.string,
  metrics: PropTypes.shape({
    progression: PropTypes.number,
    stars: PropTypes.number,
    mandatoryModules: PropTypes.number,
    totalModules: PropTypes.number
  }),
  diplomaUrl: PropTypes.string,
  badgeUrl: PropTypes.string,
  ongoingCoursesAvailable: PropTypes.bool,
  certificationCourses: PropTypes.shape(CardsGrid.propTypes),
  filters: PropTypes.shape({
    onChange: PropTypes.func,
    options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
  }),
  onBackClick: PropTypes.func,
  onContinueLearningClick: PropTypes.func,
  search: PropTypes.shape({
    oldValue: PropTypes.string,
    onChange: PropTypes.func
  })
} : {};
export default CertificationDetail;
//# sourceMappingURL=index.js.map