import _isEmpty from "lodash/fp/isEmpty";
import _multiply from "lodash/fp/multiply";
import _parseInt2 from "lodash/fp/parseInt";
import _round from "lodash/fp/round";
import _zip from "lodash/fp/zip";
import _times from "lodash/fp/times";
import _pipe from "lodash/fp/pipe";
import _isNil from "lodash/fp/isNil";
import _get from "lodash/fp/get";
import _flatten from "lodash/fp/flatten";
import _compact from "lodash/fp/compact";
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 from 'react';
import PropTypes from 'prop-types';
import { NovaCompositionNavigationArrowRight as ArrowRight, NovaCompositionCoorpacademyCharts as ChartsIcon, NovaCompositionCoorpacademyStar as StarIcon, NovaCompositionCoorpacademyCheck as CheckIcon, NovaSolidStatusClose as Close } from '@coorpacademy/nova-icons';
import classnames from 'classnames';
import Loader from '../../../atom/loader';
import Life from '../../../atom/life';
import Link from '../../../atom/link';
import Animation, { EASE_OUT_CUBIC } from '../../../hoc/animation';
import Transition from '../../../hoc/transition';
import AnimationScheduler, { AnimationAdapter } from '../../../hoc/animation-scheduler';
import Provider from '../../../atom/provider';
import style from './style.css';
const separator = index => /*#__PURE__*/React.createElement("span", {
  key: index,
  className: style.answerSeparator
}, "/");
const joinBySeparator = elements => {
  const separators = _times(separator, elements.length - 1);
  return _pipe(_zip, _flatten, _compact)(elements, separators);
};
const AnswersCorrection = ({
  corrections
}) => {
  const answers = corrections.map((correction, index) => {
    const key = `answer_${index}`;
    return /*#__PURE__*/React.createElement("span", {
      key: key,
      "data-name": "answer",
      "data-correct": correction.isCorrect,
      className: classnames(correction.isCorrect ? style.correctAnswer : style.wrongAnswer, style.innerHTML)
      // eslint-disable-next-line react/no-danger
      ,
      dangerouslySetInnerHTML: {
        __html: correction.answer
      }
    });
  }, corrections);
  return /*#__PURE__*/React.createElement("p", {
    className: style.fullAnswer
  }, joinBySeparator(answers));
};
AnswersCorrection.propTypes = process.env.NODE_ENV !== "production" ? {
  corrections: PropTypes.arrayOf(PropTypes.shape({
    answer: PropTypes.string.isRequired,
    isCorrect: PropTypes.bool.isRequired
  }))
} : {};
const formatPlusSign = value => (value >= 0 ? '+' : '') + value;
const Rank = ({
  failed,
  rank,
  animated,
  onAnimationEnd
}, {
  skin
}) => {
  const positive = _get('common.positive', skin);
  if (failed || _isNil(rank)) return null;
  return /*#__PURE__*/React.createElement(AnimationScheduler, {
    animated: animated,
    onAnimationEnd: onAnimationEnd
  }, /*#__PURE__*/React.createElement("div", {
    className: style.centerContent
  }, /*#__PURE__*/React.createElement(Transition, {
    name: "label",
    after: "counter",
    className: style.bumped
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconBubble
  }, /*#__PURE__*/React.createElement(ChartsIcon, {
    className: style.icon,
    style: {
      color: positive
    }
  }))), /*#__PURE__*/React.createElement("span", {
    className: style.iconText
  }, /*#__PURE__*/React.createElement(Animation, {
    name: "counter",
    bezier: EASE_OUT_CUBIC,
    duration: 1000
  }, progress => _pipe(_parseInt2(10), _multiply(progress), _round, formatPlusSign)(rank)))));
};
Rank.propTypes = process.env.NODE_ENV !== "production" ? {
  failed: PropTypes.bool,
  rank: PropTypes.string,
  animated: Animation.propTypes.animated,
  onAnimationEnd: Animation.propTypes.onAnimationEnd
} : {};
Rank.contextTypes = {
  skin: Provider.childContextTypes.skin
};
const Stars = ({
  failed,
  stars,
  animated,
  onAnimationEnd
}, {
  skin
}) => {
  const positive = _get('common.positive', skin);
  if (failed || _isNil(stars)) return null;
  return /*#__PURE__*/React.createElement(AnimationScheduler, {
    animated: animated,
    onAnimationEnd: onAnimationEnd
  }, /*#__PURE__*/React.createElement("div", {
    className: style.centerContent
  }, /*#__PURE__*/React.createElement(Transition, {
    name: "label",
    after: "counter",
    className: style.bumped
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconBubble
  }, /*#__PURE__*/React.createElement(StarIcon, {
    className: style.icon,
    style: {
      color: positive
    }
  }))), /*#__PURE__*/React.createElement("span", {
    "data-name": "iconText",
    className: style.iconText
  }, /*#__PURE__*/React.createElement(Animation, {
    name: "counter",
    bezier: EASE_OUT_CUBIC,
    duration: 1000
  }, progress => _pipe(_parseInt2(10), _multiply(progress), _round, formatPlusSign)(stars)))));
};
Stars.propTypes = process.env.NODE_ENV !== "production" ? {
  failed: PropTypes.bool,
  stars: PropTypes.string,
  animated: Animation.propTypes.animated,
  onAnimationEnd: Animation.propTypes.onAnimationEnd
} : {};
Stars.contextTypes = {
  skin: Provider.childContextTypes.skin
};
const Lifes = ({
  lives,
  failed,
  animated,
  revival
}) => {
  if (_isNil(lives)) return null;
  return /*#__PURE__*/React.createElement(Life, {
    failed: failed,
    count: lives,
    animated: animated,
    revival: revival,
    className: style.life
  });
};
Lifes.propTypes = process.env.NODE_ENV !== "production" ? {
  lives: Life.propTypes.count,
  failed: Life.propTypes.failed,
  animated: Life.propTypes.animated,
  revival: Life.propTypes.revival
} : {};
const IconsPart = props => {
  const {
    lives,
    failed,
    stars,
    rank,
    animated,
    revival
  } = props;
  return /*#__PURE__*/React.createElement(AnimationScheduler, {
    animated: true
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconsWrapper
  }, /*#__PURE__*/React.createElement(Lifes, {
    lives: lives,
    failed: failed,
    animated: animated,
    revival: revival
  }), /*#__PURE__*/React.createElement(AnimationAdapter, {
    name: "stars"
  }, /*#__PURE__*/React.createElement(Stars, {
    stars: stars,
    fail: failed
  })), /*#__PURE__*/React.createElement(AnimationAdapter, {
    name: "rank",
    after: "stars"
  }, /*#__PURE__*/React.createElement(Rank, {
    rank: rank,
    fail: failed
  }))));
};
IconsPart.propTypes = process.env.NODE_ENV !== "production" ? {
  lives: Lifes.propTypes.lives,
  failed: Lifes.propTypes.failed,
  stars: Stars.propTypes.stars,
  rank: Rank.propTypes.rank,
  animated: AnimationScheduler.propTypes.animated,
  revival: PropTypes.bool
} : {};
const buildClass = (value, success, failed, loading, scormStyle, mode = 'default') => {
  if (loading && _isNil(value)) return loading;
  if (mode === 'scorm') return scormStyle;
  return value ? failed : success;
};
const getLinkStyle = ({
  gameOver,
  extraLifeGranted
}) => {
  if (extraLifeGranted) {
    return style.oneMoreLife;
  } else if (gameOver) {
    return style.gameOver;
  } else {
    return null;
  }
};
const renderIconStatusScorm = failed => {
  return /*#__PURE__*/React.createElement("div", {
    className: failed ? style.iconCloseContainer : style.iconSuccessContainer
  }, failed ? /*#__PURE__*/React.createElement(Close, {
    className: style.failIcon
  }) : /*#__PURE__*/React.createElement(CheckIcon, {
    className: style.checkIcon
  }));
};
const buildDefaultOrScormStyle = (defaultStyle, styleScorm, failed, mode = 'default', failedStyle = null) => {
  if (mode === 'scorm' && failed && failedStyle) return failedStyle;
  if (mode === 'scorm') return styleScorm;
  return defaultStyle;
};
const CorrectionPart = props => {
  const {
    failed,
    corrections,
    title,
    subtitle,
    stars,
    rank,
    gameOver,
    mode = 'default'
  } = props;
  const isLoading = _isNil(failed);
  const className = buildClass(failed, stars && rank ? style.correctionSectionEndSuccess : style.correctionSectionSuccess, gameOver ? style.correctionSectionFailGameOver : style.correctionSectionFail, style.correctionSectionLoading, style.resultContenantContainerScorm, mode);
  return /*#__PURE__*/React.createElement("div", {
    "data-name": "correctionSection",
    className: className
  }, mode === 'scorm' && !isLoading && renderIconStatusScorm(failed), /*#__PURE__*/React.createElement("div", {
    className: buildDefaultOrScormStyle(style.titlesWrapper, style.titlesWrapperScorm, failed, mode)
  }, isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, /*#__PURE__*/React.createElement("h1", {
    "data-name": "title",
    className: buildDefaultOrScormStyle(classnames(style.title, style.innerHTML), style.resultTitleScorm, failed, mode)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: title
    }
  }), /*#__PURE__*/React.createElement("h2", {
    className: buildDefaultOrScormStyle(style.subtitle, style.resultSubtitleScorm, failed, mode, style.statusPlayerResultFailScorm),
    role: 'status'
  }, subtitle), failed && !_isEmpty(corrections) ? /*#__PURE__*/React.createElement(AnswersCorrection, {
    corrections: corrections
  }) : null), mode !== 'scorm' ? /*#__PURE__*/React.createElement(IconsPart, props) : null);
};
CorrectionPart.propTypes = process.env.NODE_ENV !== "production" ? {
  ...IconsPart.propTypes,
  failed: PropTypes.bool,
  corrections: AnswersCorrection.propTypes.corrections,
  title: PropTypes.string,
  subtitle: PropTypes.string,
  stars: PropTypes.string,
  rank: PropTypes.string,
  gameOver: PropTypes.bool
} : {};
const NextQuestionPart = (props, context) => {
  const {
    cta,
    type,
    extraLifeGranted,
    gameOver,
    failed = false,
    lives = 0,
    mode
  } = props;
  const {
    title,
    nextStepTitle,
    showNextLevel = false,
    ...linkProps
  } = cta || {};
  let dataNext;
  switch (type) {
    case 'popinCorrection':
      {
        if (gameOver) {
          dataNext = 'game-over';
        } else if (failed) {
          if (lives > 0) {
            dataNext = 'continue-failure';
          } else if (extraLifeGranted) {
            dataNext = 'continue-used-extra-life';
          }
        } else {
          dataNext = 'continue-success';
        }
        break;
      }
    case 'popinEnd':
      {
        if (failed) {
          dataNext = 'redo-content';
        } else if (showNextLevel) {
          dataNext = 'next-level';
        } else {
          dataNext = 'home';
        }
      }
  }
  const nextStep = nextStepTitle ? /*#__PURE__*/React.createElement("div", {
    className: classnames(gameOver ? style.gameOverSubtitle : style.nextStepTitle, style.innerHTML)
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: nextStepTitle
    }
  }) : null;
  return mode !== 'scorm' ? /*#__PURE__*/React.createElement(Link, _extends({}, linkProps, {
    className: classnames(style.nextSection, getLinkStyle({
      gameOver,
      extraLifeGranted
    })),
    "data-name": "nextLink",
    "data-popin": type,
    "data-next": dataNext
  }), /*#__PURE__*/React.createElement("div", {
    className: style.wrapperNextSection
  }, /*#__PURE__*/React.createElement("div", {
    className: style.nextButton
  }, title, /*#__PURE__*/React.createElement(ArrowRight, {
    className: style.nextButtonIcon
  })), nextStep)) : null;
};
NextQuestionPart.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: PropTypes.shape({
    ...Link.propTypes,
    title: PropTypes.string,
    nextStepTitle: PropTypes.string,
    showNextLevel: PropTypes.bool
  }),
  type: PropTypes.oneOf(['popinCorrection', 'popinEnd']).isRequired,
  extraLifeGranted: PropTypes.bool,
  gameOver: PropTypes.bool,
  failed: PropTypes.bool,
  lives: PropTypes.number,
  mode: PropTypes.string
} : {};
const PopinHeader = (props, context) => {
  const {
    animated,
    failed,
    title,
    subtitle,
    lives,
    stars,
    rank,
    corrections,
    cta,
    extraLifeGranted,
    gameOver = false,
    type,
    mode = 'default'
  } = props;
  const state = buildClass(failed, 'success', 'failed', null);
  const nextLink = cta ? /*#__PURE__*/React.createElement(NextQuestionPart, {
    cta: cta,
    type: type,
    extraLifeGranted: extraLifeGranted,
    failed: failed,
    gameOver: gameOver,
    lives: lives,
    mode: mode
  }) : null;
  return /*#__PURE__*/React.createElement("div", {
    className: classnames(mode === 'scorm' && style.scorm, cta ? mode !== 'scorm' && style.header : mode !== 'scorm' && style.headerWithoutCTA),
    "data-name": "popinHeader",
    "data-state": state
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(mode !== 'scorm' && style.headerTitle)
  }, /*#__PURE__*/React.createElement(CorrectionPart, {
    title: title,
    subtitle: subtitle,
    lives: lives,
    animated: animated,
    stars: stars,
    rank: rank,
    failed: failed,
    gameOver: gameOver,
    revival: extraLifeGranted,
    corrections: corrections,
    mode: mode
  }), nextLink));
};
PopinHeader.contextTypes = {
  skin: Provider.childContextTypes.skin
};
PopinHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  cta: NextQuestionPart.propTypes.cta,
  type: NextQuestionPart.propTypes.type,
  extraLifeGranted: NextQuestionPart.propTypes.extraLifeGranted,
  failed: NextQuestionPart.propTypes.failed,
  gameOver: NextQuestionPart.propTypes.gameOver,
  lives: NextQuestionPart.propTypes.lives,
  title: CorrectionPart.propTypes.title,
  subtitle: CorrectionPart.propTypes.subtitle,
  animated: CorrectionPart.propTypes.animated,
  stars: CorrectionPart.propTypes.stars,
  rank: CorrectionPart.propTypes.rank,
  corrections: CorrectionPart.propTypes.corrections,
  mode: PropTypes.oneOf(['scorm', 'default'])
} : {};
export default PopinHeader;
//# sourceMappingURL=index.js.map