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, { useCallback, useMemo } from 'react';
import classnames from 'classnames';
import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
import ButtonLink from '../../atom/button-link';
import Provider, { GetTranslateFromContext } from '../../atom/provider';
import Tooltip from '../../atom/tooltip';
import style from './style.css';
import propTypes from './prop-types';
const KlfButton = ({
  klf
}, legacyContext) => {
  const translate = GetTranslateFromContext(legacyContext);
  const klfButtonProps = useMemo(() => ({
    ...klf,
    icon: {
      position: 'left',
      type: 'key'
    },
    type: 'primary'
  }), [klf]);
  const AnchorButton = useCallback(({
    onKeyDown
  }) => /*#__PURE__*/React.createElement("div", {
    className: style.klfButtonContainer
  }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, klfButtonProps, {
    className: style.klfButton,
    onKeyDown: onKeyDown,
    useTitle: false
  }))), [klfButtonProps]);
  const TooltipContent = useCallback(() => /*#__PURE__*/React.createElement("span", {
    className: style.tooltipText
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: klf.tooltip
    }
  }), [klf.tooltip]);
  const toolTipProps = useMemo(() => ({
    closeToolTipInformationTextAriaLabel: translate('close_tooltip_information'),
    AnchorElement: AnchorButton,
    TooltipContent,
    'aria-label': translate('More details'),
    tooltipClassName: style.toolTipCustomization
  }), [AnchorButton, TooltipContent, translate]);
  return /*#__PURE__*/React.createElement("div", {
    className: style.klfContainer
  }, /*#__PURE__*/React.createElement(Tooltip, toolTipProps));
};
KlfButton.propTypes = process.env.NODE_ENV !== "production" ? {
  klf: propTypes.klf
} : {};
KlfButton.contextTypes = {
  translate: Provider.childContextTypes.translate
};
const ReviewCorrectionPopin = props => {
  const {
    information,
    resultLabel,
    type,
    klf,
    next
  } = props;
  const nextQuestionButtonProps = {
    ...next,
    type: 'primary'
  };
  const cta = type === 'wrong' ? /*#__PURE__*/React.createElement(KlfButton, {
    klf: klf
  }) : null;
  const ICONS = {
    right: RightIcon,
    wrong: WrongIcon
  };
  const Icon = ICONS[type];
  return /*#__PURE__*/React.createElement("div", {
    className: style.wrapper,
    "data-testid": "review-correction-popin"
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames(style.popin, type === 'right' ? style.right : style.wrong)
  }, /*#__PURE__*/React.createElement("div", {
    className: style.correctionSection
  }, /*#__PURE__*/React.createElement("div", {
    className: style.iconCircle
  }, /*#__PURE__*/React.createElement(Icon, {
    className: type === 'right' ? style.iconRight : style.iconWrong
  })), /*#__PURE__*/React.createElement("div", {
    className: style.resultLabel
  }, /*#__PURE__*/React.createElement("span", {
    "aria-label": resultLabel,
    role: "status"
  }, resultLabel))), /*#__PURE__*/React.createElement("div", {
    className: style.feedbackSection
  }, /*#__PURE__*/React.createElement("div", {
    className: style.information,
    "aria-label": "answer-information"
  }, /*#__PURE__*/React.createElement("div", {
    className: style.labelContainer
  }, /*#__PURE__*/React.createElement("span", {
    className: style.label,
    "aria-label": information.label
  }, information.label)), /*#__PURE__*/React.createElement("span", {
    className: style.message,
    "aria-label": information.message
    // eslint-disable-next-line react/no-danger
    ,
    dangerouslySetInnerHTML: {
      __html: information.message
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: type === 'right' ? style.actions : style.actionsWrong
  }, cta, /*#__PURE__*/React.createElement("div", {
    className: style.nextQuestionContainer,
    "data-testid": "next-question-button-container"
  }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, nextQuestionButtonProps, {
    className: style.nextQuestionButton
  }))))));
};
ReviewCorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default ReviewCorrectionPopin;
//# sourceMappingURL=index.js.map