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, { useMemo, useEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import get from 'lodash/fp/get';
import getOr from 'lodash/fp/getOr';
import Answer from '../../molecule/answer';
import ButtonLink from '../../atom/button-link';
import Loader from '../../atom/loader';
import ReviewCorrectionPopin from '../../molecule/review-correction-popin';
import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
import propTypes from './prop-types';
import style from './style.css';
const CorrectionPopin = ({
  correctionPopinProps,
  slideIndex,
  showCorrectionPopin,
  animateCorrectionPopin
}) => {
  if (!showCorrectionPopin) return null;
  const klf = getOr({}, 'klf', correctionPopinProps);
  const information = getOr({
    label: '',
    message: ''
  }, 'information', correctionPopinProps);
  const next = get('next', correctionPopinProps);
  const onClick = get(['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.createElement("div", {
    className: classnames(style.correctionPopinWrapper, animateCorrectionPopin ? style.popinAnimation : null)
  }, /*#__PURE__*/React.createElement(ReviewCorrectionPopin, _correctionPopinProps));
};
CorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
  slideIndex: PropTypes.string,
  showCorrectionPopin: PropTypes.bool,
  animateCorrectionPopin: PropTypes.bool,
  correctionPopinProps: propTypes.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.validateButton,
    customStyle: {
      backgroundColor: primarySkinColor
    }
  };

  /* istanbul ignore next */
  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.createElement("div", {
    key: "button-wrapper",
    className: style.validateButtonWrapper
  }, /*#__PURE__*/React.createElement(ButtonLink, validateButtonProps));
};
ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
  slideIndex: PropTypes.string,
  validateButton: propTypes.validateButton,
  primarySkinColor: PropTypes.string,
  ariaLabel: PropTypes.string
} : {};
const QuestionContainer = props => {
  const {
    answerUI,
    questionText,
    questionOrigin,
    disableContent
  } = props;
  if (!answerUI || !questionText) return null;
  return /*#__PURE__*/React.createElement("div", {
    key: "content-container",
    "data-testid": "content-container",
    className: classnames(style.slideContentContainer, disableContent ? style.disabledSlideContent : null)
  }, /*#__PURE__*/React.createElement("div", {
    key: "from-course",
    className: style.questionOrigin
  }, questionOrigin), /*#__PURE__*/React.createElement("div", {
    key: "title",
    "data-testid": "slide-question",
    className: style.question
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: questionText
    }
  }), /*#__PURE__*/React.createElement("div", {
    key: "help",
    className: style.help
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: get('help', answerUI)
    }
  }), /*#__PURE__*/React.createElement("div", {
    key: "answer-container",
    className: style.answerContainer
  }, /*#__PURE__*/React.createElement(Answer, _extends({}, answerUI, {
    question: questionText,
    key: "answer"
  }))));
};
QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
  answerUI: PropTypes.shape(propTypes.slide.answerUI),
  questionText: PropTypes.string,
  questionOrigin: PropTypes.string,
  disableContent: PropTypes.bool
} : {};
const ReviewSlide = (props, legacyContext) => {
  const {
    slide,
    validateButton,
    correctionPopinProps,
    slideIndex = '0'
  } = props;
  const skin = GetSkinFromContext(legacyContext);
  const translate = GetTranslateFromContext(legacyContext);
  const validateariaLabel = translate('validate_aria_label');
  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
  const {
    loading,
    loadingAriaLabel,
    parentContentTitle,
    questionText,
    disabledContent,
    answerUI,
    showCorrectionPopin,
    animateCorrectionPopin
  } = slide;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "review-slide",
    className: style.slide
  }, loading ? /*#__PURE__*/React.createElement(Loader, {
    className: style.loader,
    theme: "default",
    "aria-label": loadingAriaLabel
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QuestionContainer, {
    questionOrigin: parentContentTitle,
    questionText: questionText,
    answerUI: answerUI,
    disableContent: disabledContent,
    key: "question-container"
  }), /*#__PURE__*/React.createElement(ValidateButton, {
    slideIndex: slideIndex,
    validateButton: validateButton,
    primarySkinColor: primarySkinColor,
    key: "validate-button",
    ariaLabel: validateariaLabel
  }), /*#__PURE__*/React.createElement(CorrectionPopin, {
    correctionPopinProps: correctionPopinProps,
    slideIndex: slideIndex,
    showCorrectionPopin: showCorrectionPopin,
    animateCorrectionPopin: animateCorrectionPopin,
    key: "correction-popin"
  })));
};
ReviewSlide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
ReviewSlide.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
export default ReviewSlide;
//# sourceMappingURL=index.js.map