import _noop from "lodash/fp/noop";
import _get from "lodash/fp/get";
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { NovaCompositionNavigationArrowRight as ArrowRightIcon, NovaCompositionCoorpacademyStar as StarIcon, NovaCompositionCoorpacademyTimer as TimerIcon, NovaCompositionCoorpacademyBolt as BoltIcon, NovaSolidSchoolScienceGraduationHat as CertificationIcon, NovaCompositionCoorpacademyAdaptive as AdaptiveIcon, NovaSolidContentContentBook1 as LearnerIcon, NovaCompositionCoorpacademyScorm as ScormIcon, NovaCompositionCoorpacademyArticle as ArticleIcon, NovaCompositionCoorpacademyVideo as VideoIcon, NovaCompositionCoorpacademyMicrophone as PodcastIcon, NovaCompositionCoorpacademyRevision as RevisionIcon } from '@coorpacademy/nova-icons';
import Provider, { GetSkinFromContext } from '../../atom/provider';
import ProgressBar from '../../molecule/progress-bar';
import Link from '../../atom/link';
import style from './progression-item.css';
const ICONS = {
  chapter: TimerIcon,
  course: LearnerIcon,
  battle: BoltIcon,
  certification: CertificationIcon,
  article: ArticleIcon,
  scorm: ScormIcon,
  video: VideoIcon,
  podcast: PodcastIcon,
  review: RevisionIcon
};
const ProgressionItem = (props, legacyContext) => {
  const skin = GetSkinFromContext(legacyContext);
  const {
    disabled = false,
    adaptive,
    completion,
    label,
    level,
    onClick = _noop,
    stars,
    maxStars,
    state,
    type,
    steps = 0,
    adaptiveAriaLabel
  } = props;
  const dark = _get('common.dark', skin);
  const primary = _get('common.primary', skin);
  const white = _get('common.white', skin);
  const IconType = ICONS[type];
  const adaptiveIcon = adaptive ? /*#__PURE__*/React.createElement("div", {
    className: style.adaptiveIcon,
    style: {
      backgroundColor: primary
    }
  }, /*#__PURE__*/React.createElement(AdaptiveIcon, {
    style: {
      color: white
    },
    height: 14,
    "aria-label": adaptiveAriaLabel
  })) : null;
  const handleCTAClick = useMemo(() => e => {
    e.stopPropagation();
    e.preventDefault();
    onClick(e);
  }, [onClick]);
  const link = disabled ? null : /*#__PURE__*/React.createElement(Link, {
    style: {
      color: primary
    },
    onClick: handleCTAClick,
    "data-progression-state": state
  }, /*#__PURE__*/React.createElement("span", {
    className: style.cta
  }, state, " ", /*#__PURE__*/React.createElement(ArrowRightIcon, {
    style: {
      color: primary
    },
    height: 12,
    width: 20
  })));
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(style.progressionItem, disabled ? style.disabled : '')
  }, /*#__PURE__*/React.createElement("div", {
    className: style.wrapperTitle
  }, /*#__PURE__*/React.createElement(IconType, {
    className: style.iconType,
    style: {
      color: dark
    }
  }), /*#__PURE__*/React.createElement("div", {
    "data-name": "activityLabel",
    className: style.label,
    title: label
  }, /*#__PURE__*/React.createElement("div", {
    className: style.innerHTML
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: label
    }
  }), adaptiveIcon), /*#__PURE__*/React.createElement("div", {
    "data-name": "activityStars",
    role: "progressbar",
    className: style.stars,
    style: {
      color: primary
    }
  }, stars, maxStars ? ' /' : null, maxStars ? /*#__PURE__*/React.createElement("span", {
    className: style.smallStars
  }, maxStars) : null, ' ', /*#__PURE__*/React.createElement(StarIcon, {
    className: style.iconStar,
    style: {
      color: primary
    }
  }))), /*#__PURE__*/React.createElement(ProgressBar, {
    className: style.completion,
    value: completion * 100,
    max: 100,
    steps: steps,
    style: {
      backgroundColor: primary,
      borderRadius: 0
    },
    displayInfo: false
  }), /*#__PURE__*/React.createElement("div", {
    className: style.state
  }, link, /*#__PURE__*/React.createElement("span", {
    className: style.level
  }, level)));
};
ProgressionItem.propTypes = process.env.NODE_ENV !== "production" ? {
  completion: PropTypes.number.isRequired,
  stars: PropTypes.number.isRequired,
  maxStars: PropTypes.number,
  steps: PropTypes.number,
  disabled: PropTypes.bool,
  label: PropTypes.string.isRequired,
  level: PropTypes.string.isRequired,
  state: PropTypes.string.isRequired,
  adaptiveAriaLabel: PropTypes.string,
  type: PropTypes.string.isRequired,
  adaptive: PropTypes.bool.isRequired,
  onClick: PropTypes.func
} : {};
ProgressionItem.contextTypes = {
  skin: Provider.childContextTypes.skin
};
export default ProgressionItem;
//# sourceMappingURL=progression-item.js.map