import _noop from "lodash/fp/noop";
import _get from "lodash/fp/get";
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 classnames from 'classnames';
import React, { useCallback, useMemo, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { v5 as uuidV5 } from 'uuid';
import { NovaCompositionCoorpacademyStar as StarIcon, NovaCompositionCoorpacademyTimer as TimerIcon, NovaCompositionCoorpacademyBolt as BoltIcon, NovaSolidSchoolScienceGraduationHat as CertificationIcon, NovaSolidContentContentBook1 as LearnerIcon, NovaSolidVoteRewardsRewardsBadge1 as BonusIcon, NovaCompositionCoorpacademyScorm as ScormIcon, NovaCompositionCoorpacademyArticle as ArticleIcon, NovaCompositionCoorpacademyVideo as VideoIcon, NovaCompositionCoorpacademyMicrophone as PodcastIcon, NovaCompositionCoorpacademyRevision as RevisionIcon } from '@coorpacademy/nova-icons';
import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
import ToolTip, { toggleStateOnKeyPress } from '../../atom/tooltip';
import Link from '../../atom/link';
import style from './engine-stars.css';
const ICONS = {
  microlearning: TimerIcon,
  learner: LearnerIcon,
  battle: BoltIcon,
  certifications: CertificationIcon,
  bonus: BonusIcon,
  article: ArticleIcon,
  scorm: ScormIcon,
  video: VideoIcon,
  podcast: PodcastIcon,
  review: RevisionIcon
};
const ToolTipContent = ({
  preMessage,
  linkMessage,
  endMessage,
  onClick,
  color,
  handleContentMouseOver
}) => /*#__PURE__*/React.createElement("p", {
  className: style.toolTipContent,
  onMouseOver: handleContentMouseOver,
  "data-testid": "react-tooltip-content"
}, /*#__PURE__*/React.createElement("span", null, preMessage), /*#__PURE__*/React.createElement(Link, {
  onClick: onClick,
  style: {
    color
  }
}, linkMessage), /*#__PURE__*/React.createElement("span", null, endMessage));
ToolTipContent.propTypes = process.env.NODE_ENV !== "production" ? {
  preMessage: PropTypes.string,
  linkMessage: PropTypes.string,
  endMessage: PropTypes.string,
  color: PropTypes.string,
  onClick: PropTypes.func,
  handleContentMouseOver: PropTypes.func
} : {};
const EngineStars = (props, legacyContext) => {
  const skin = GetSkinFromContext(legacyContext);
  const translate = GetTranslateFromContext(legacyContext);
  const {
    toolTip = null,
    disabled,
    type,
    stars,
    title,
    active = false,
    onClick = _noop,
    className
  } = props;
  const handleClick = e => {
    e.stopPropagation();
    e.preventDefault();
    onClick(e);
  };
  const dark = _get('common.dark', skin);
  const light = _get('common.light', skin);
  const IconType = ICONS[type];
  const primary = _get('common.primary', skin);

  // to replace by useId when React17 is bumped to React18
  const [engineStarsContentId] = useState(disabled ? uuidV5('engine-stars', uuidV5.URL) : undefined);
  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
  const buttonRef = useRef(null);
  const handleKeyPress = useCallback(event => {
    toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
  }, [toolTipIsVisible]);
  const handleMouseOver = useCallback(() => {
    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
    setToolTipIsVisible(true);
  }, [mouseLeaveTimer]);
  const handleContentMouseOver = useCallback(() => {
    mouseLeaveTimer && /* istanbul ignore next */clearTimeout(mouseLeaveTimer);
  }, [mouseLeaveTimer]);
  const handleMouseLeave = useCallback(() => {
    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), 500));
  }, []);
  const toolTipContentProps = useMemo(() => toolTip ? {
    preMessage: toolTip.preMessage,
    linkMessage: toolTip.linkMessage,
    endMessage: toolTip.endMessage,
    color: primary,
    onClick: toolTip.onClick
  } : null, [primary, toolTip]);
  const toolTipProps = {
    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
  };
  const TooltipContent = useCallback(_props => /*#__PURE__*/React.createElement(ToolTipContent, _extends({}, toolTipContentProps, _props, {
    handleContentMouseOver: handleContentMouseOver
  })), [handleContentMouseOver, toolTipContentProps]);
  return /*#__PURE__*/React.createElement("button", {
    ref: buttonRef,
    "data-tip": disabled,
    "data-engine": type,
    "data-testid": `engine-stars-${type}`
    // eslint-disable-next-line no-nested-ternary
    ,
    onClick: disabled ? handleKeyPress : active ? _noop : handleClick,
    "data-for": engineStarsContentId,
    className: classnames([style.engineStars, disabled ? style.disabled : '', active ? style.active : '', onClick !== _noop ? style.clickable : null, className]),
    type: "button",
    "data-tooltip-place": "left",
    onKeyDown: handleKeyPress,
    onMouseLeave: handleMouseLeave,
    onMouseOver: handleMouseOver,
    "aria-label": `${title} - ${stars} ${translate('stars')}`
  }, disabled ? /*#__PURE__*/React.createElement(ToolTip, _extends({}, toolTipProps, {
    anchorId: engineStarsContentId,
    toolTipIsVisible: toolTipIsVisible,
    TooltipContent: TooltipContent,
    mouseLeaveTimer: mouseLeaveTimer
  })) : null, /*#__PURE__*/React.createElement("span", {
    className: style.engineIcon,
    style: {
      backgroundColor: onClick === _noop ? light : primary
    }
  }, /*#__PURE__*/React.createElement(IconType, {
    className: style.iconHeader,
    width: "30"
  })), /*#__PURE__*/React.createElement("div", {
    className: style.score,
    style: {
      color: active ? primary : dark
    }
  }, /*#__PURE__*/React.createElement("p", {
    "data-name": "star-counter"
  }, stars), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StarIcon, {
    className: style.iconStar,
    style: {
      color: active ? primary : dark
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: style.scoreTitle
  }, title));
};
EngineStars.propTypes = process.env.NODE_ENV !== "production" ? {
  type: PropTypes.string.isRequired,
  stars: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired,
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  className: PropTypes.string,
  toolTip: PropTypes.shape({
    preMessage: PropTypes.string,
    linkMessage: PropTypes.string,
    endMessage: PropTypes.string,
    onClick: PropTypes.func
  })
} : {};
EngineStars.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
export default EngineStars;
//# sourceMappingURL=engine-stars.js.map