"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _get = _interopRequireDefault(require("lodash/fp/get"));
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
var _answer = _interopRequireDefault(require("../../molecule/answer"));
var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
var _loader = _interopRequireDefault(require("../../atom/loader"));
var _reviewCorrectionPopin = _interopRequireDefault(require("../../molecule/review-correction-popin"));
var _provider = _interopRequireWildcard(require("../../atom/provider"));
var _propTypes2 = _interopRequireDefault(require("./prop-types"));
var _style = _interopRequireDefault(require("./style.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); }
const CorrectionPopin = ({
  correctionPopinProps,
  slideIndex,
  showCorrectionPopin,
  animateCorrectionPopin
}) => {
  if (!showCorrectionPopin) return null;
  const klf = (0, _getOr.default)({}, 'klf', correctionPopinProps);
  const information = (0, _getOr.default)({
    label: '',
    message: ''
  }, 'information', correctionPopinProps);
  const next = (0, _get.default)('next', correctionPopinProps);
  const onClick = (0, _get.default)(['next', 'onClick'], correctionPopinProps);
  const _correctionPopinProps = {
    next: {
      onClick,
      label: next && next.label,
      'data-name': `next-question-button-${slideIndex}`,
      'aria-label': next && next['aria-label']
    },
    klf,
    information,
    type: correctionPopinProps.type,
    resultLabel: correctionPopinProps.resultLabel
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(_style.default.correctionPopinWrapper, animateCorrectionPopin ? _style.default.popinAnimation : null)
  }, /*#__PURE__*/_react.default.createElement(_reviewCorrectionPopin.default, _correctionPopinProps));
};
CorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
  slideIndex: _propTypes.default.string,
  showCorrectionPopin: _propTypes.default.bool,
  animateCorrectionPopin: _propTypes.default.bool,
  correctionPopinProps: _propTypes2.default.correctionPopinProps
} : {};
const ValidateButton = ({
  slideIndex,
  validateButton,
  primarySkinColor,
  ariaLabel
}) => {
  const {
    label,
    onClick,
    disabled
  } = validateButton;
  const validateButtonProps = {
    type: 'primary',
    label,
    'aria-label': ariaLabel,
    'data-name': `slide-validate-button-${slideIndex}`,
    onClick,
    disabled,
    className: _style.default.validateButton,
    customStyle: {
      backgroundColor: primarySkinColor
    }
  };

  /* istanbul ignore next */
  (0, _react.useEffect)(() => {
    const keyDownHandler = event => {
      if (event.key === 'Enter' || event.key === ' ' && disabled) {
        event.preventDefault();
      }
    };
    document.addEventListener('keydown', keyDownHandler);
    return () => {
      document.removeEventListener('keydown', keyDownHandler);
    };
  }, [disabled]);
  return /*#__PURE__*/_react.default.createElement("div", {
    key: "button-wrapper",
    className: _style.default.validateButtonWrapper
  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, validateButtonProps));
};
ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
  slideIndex: _propTypes.default.string,
  validateButton: _propTypes2.default.validateButton,
  primarySkinColor: _propTypes.default.string,
  ariaLabel: _propTypes.default.string
} : {};
const QuestionContainer = props => {
  const {
    answerUI,
    questionText,
    questionOrigin,
    disableContent
  } = props;
  if (!answerUI || !questionText) return null;
  return /*#__PURE__*/_react.default.createElement("div", {
    key: "content-container",
    "data-testid": "content-container",
    className: (0, _classnames.default)(_style.default.slideContentContainer, disableContent ? _style.default.disabledSlideContent : null)
  }, /*#__PURE__*/_react.default.createElement("div", {
    key: "from-course",
    className: _style.default.questionOrigin
  }, questionOrigin), /*#__PURE__*/_react.default.createElement("div", {
    key: "title",
    "data-testid": "slide-question",
    className: _style.default.question
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: questionText
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    key: "help",
    className: _style.default.help
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: (0, _get.default)('help', answerUI)
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    key: "answer-container",
    className: _style.default.answerContainer
  }, /*#__PURE__*/_react.default.createElement(_answer.default, _extends({}, answerUI, {
    question: questionText,
    key: "answer"
  }))));
};
QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
  answerUI: _propTypes.default.shape(_propTypes2.default.slide.answerUI),
  questionText: _propTypes.default.string,
  questionOrigin: _propTypes.default.string,
  disableContent: _propTypes.default.bool
} : {};
const ReviewSlide = (props, legacyContext) => {
  const {
    slide,
    validateButton,
    correctionPopinProps,
    slideIndex = '0'
  } = props;
  const skin = (0, _provider.GetSkinFromContext)(legacyContext);
  const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
  const validateariaLabel = translate('validate_aria_label');
  const primarySkinColor = (0, _react.useMemo)(() => (0, _getOr.default)('#00B0FF', 'common.primary', skin), [skin]);
  const {
    loading,
    loadingAriaLabel,
    parentContentTitle,
    questionText,
    disabledContent,
    answerUI,
    showCorrectionPopin,
    animateCorrectionPopin
  } = slide;
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-testid": "review-slide",
    className: _style.default.slide
  }, loading ? /*#__PURE__*/_react.default.createElement(_loader.default, {
    className: _style.default.loader,
    theme: "default",
    "aria-label": loadingAriaLabel
  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(QuestionContainer, {
    questionOrigin: parentContentTitle,
    questionText: questionText,
    answerUI: answerUI,
    disableContent: disabledContent,
    key: "question-container"
  }), /*#__PURE__*/_react.default.createElement(ValidateButton, {
    slideIndex: slideIndex,
    validateButton: validateButton,
    primarySkinColor: primarySkinColor,
    key: "validate-button",
    ariaLabel: validateariaLabel
  }), /*#__PURE__*/_react.default.createElement(CorrectionPopin, {
    correctionPopinProps: correctionPopinProps,
    slideIndex: slideIndex,
    showCorrectionPopin: showCorrectionPopin,
    animateCorrectionPopin: animateCorrectionPopin,
    key: "correction-popin"
  })));
};
ReviewSlide.propTypes = process.env.NODE_ENV !== "production" ? _propTypes2.default : {};
ReviewSlide.contextTypes = {
  skin: _provider.default.childContextTypes.skin,
  translate: _provider.default.childContextTypes.translate
};
var _default = exports.default = ReviewSlide;
//# sourceMappingURL=index.js.map