"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _get = _interopRequireDefault(require("lodash/fp/get"));
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
var _index = _interopRequireDefault(require("../../molecule/answer/index.native"));
var _index2 = _interopRequireDefault(require("../../molecule/review-correction-popin/index.native"));
var _templateContext = require("../../template/app-review/template-context");
var _index3 = _interopRequireDefault(require("../../atom/button/index.native"));
var _propTypes = require("../../molecule/answer/prop-types");
var _index4 = _interopRequireDefault(require("../../molecule/video-player-mobile/index.native"));
var _index5 = _interopRequireDefault(require("../../atom/html/index.native"));
var _useMobileKeyboardVisibility = _interopRequireDefault(require("../../util/use-mobile-keyboard-visibility"));
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; }
const styles = _reactNative.StyleSheet.create({
  mediaContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: 200,
    borderRadius: 10,
    overflow: 'hidden'
  },
  image: {
    flex: 1,
    width: '100%'
  },
  correctionPopinWrapper: {
    position: 'absolute',
    bottom: 16,
    width: '105%'
  }
});
const MediaView = ({
  media,
  autoplay
}) => {
  if (!media) {
    return null;
  }
  switch (media.type) {
    case _propTypes.TYPE_VIDEO:
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.mediaContainer
      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
        media: media,
        autoplay: autoplay
      }));
    case _propTypes.TYPE_IMAGE:
      {
        const uri = `https://${media.url?.split('//')[1]}`;
        return /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
          style: [styles.mediaContainer, styles.image],
          source: {
            uri
          }
        });
      }
    case _propTypes.TYPE_AUDIO:
    default:
      return null;
  }
};
const CorrectionPopin = ({
  correctionPopinProps,
  slideIndex,
  showCorrectionPopin,
  animateCorrectionPopin
}) => {
  const translateUp = (0, _reactNativeAnimation.useTranslateY)({
    fromValue: 500,
    toValue: 0,
    duration: 500,
    easing: _reactNative.Easing.bezier(0.34, 1.36, 0.64, 1)
  });

  // the translation is required only once on mount
  // eslint-disable-next-line react-hooks/exhaustive-deps
  (0, _react.useEffect)(() => translateUp.start(), []);
  if (!showCorrectionPopin) return null;
  const klf = (0, _getOr.default)(undefined, '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
  };
  const style = animateCorrectionPopin ? [styles.correctionPopinWrapper, translateUp.animatedStyle] : styles.correctionPopinWrapper;
  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: style
  }, /*#__PURE__*/_react.default.createElement(_index2.default, _correctionPopinProps));
};
const createQuestionStyle = theme => _reactNative.StyleSheet.create({
  questionHeading: {
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  questionOriginContainer: {
    marginBottom: theme.spacing.tiny,
    marginTop: theme.spacing.small
  },
  questionOrigin: {
    fontSize: 12,
    lineHeight: 16,
    color: theme.colors.text.primary,
    textAlign: 'center'
  },
  questionTextContainer: {
    marginVertical: 4,
    textAlign: 'center'
  },
  questionText: {
    fontSize: 16,
    lineHeight: 22,
    fontWeight: '700',
    color: theme.colors.text.primary
  },
  questionHelpContainer: {
    marginVertical: 4
  },
  questionHelp: {
    fontSize: 12,
    lineHeight: 16,
    color: theme.colors.gray.medium,
    marginBottom: 0,
    marginTop: theme.spacing.small,
    textAlign: 'center'
  },
  choicesScrollView: {
    marginTop: 20,
    width: '100%'
  },
  choicesScrollContent: {
    flexGrow: 1,
    justifyContent: 'space-around',
    padding: 10
  }
});
const Question = props => {
  const {
    answerUI,
    questionText,
    questionOrigin = '',
    isKeyboardVisible,
    autoplayMedia = false
  } = props;
  const {
    theme
  } = (0, _templateContext.useTemplateContext)();
  const [style, setStyle] = (0, _react.useState)();
  (0, _react.useEffect)(() => {
    const questionStyle = createQuestionStyle(theme);
    setStyle(questionStyle);
  }, [theme]);
  if (!answerUI || !questionText || !style) return null;
  const hasVideoOrImage = answerUI.media?.type && [_propTypes.TYPE_VIDEO, _propTypes.TYPE_IMAGE].includes(answerUI.media.type);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: style.questionHeading
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: style.questionOriginContainer
  }, /*#__PURE__*/_react.default.createElement(_index5.default, {
    style: style.questionOrigin,
    isTextCentered: true
  }, questionOrigin)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: style.questionTextContainer
  }, /*#__PURE__*/_react.default.createElement(_index5.default, {
    style: style.questionText,
    isTextCentered: true
  }, questionText)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: style.questionHelpContainer
  }, /*#__PURE__*/_react.default.createElement(_index5.default, {
    style: style.questionHelp
  }, (0, _get.default)('help', answerUI)))), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
    style: style.choicesScrollView,
    contentContainerStyle: style.choicesScrollContent,
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false
  }, !isKeyboardVisible && hasVideoOrImage ? /*#__PURE__*/_react.default.createElement(MediaView, {
    media: answerUI.media,
    autoplay: autoplayMedia
  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      marginTop: hasVideoOrImage ? 30 : 0
    }
  }, /*#__PURE__*/_react.default.createElement(_index.default, answerUI))));
};
const createSlideStyle = (num, screenWidth, isKeyboardVisible) => {
  const slideWidth = screenWidth - 40 - num * 8;
  return _reactNative.StyleSheet.create({
    hiddenBackgroundToLockActions: {
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      backgroundColor: '#00000000'
    },
    slide: {
      position: 'absolute',
      left: 20 + num * 4,
      bottom: (isKeyboardVisible ? 5 : 34) + num * 5,
      backgroundColor: '#fff',
      // theme.colors.white
      height: '90%',
      width: slideWidth,
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 25,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: -1
      },
      shadowOpacity: 0.05,
      shadowRadius: 16,
      elevation: 10 - num * 1,
      borderRadius: 16
    }
  });
};
const Slide = props => {
  const {
    animatedStyle,
    slide,
    correctionPopinProps,
    validateButton,
    num,
    slideIndex = '0'
  } = props;
  const [isValidated, setValidated] = (0, _react.useState)(false);
  const isKeyboardVisible = (0, _useMobileKeyboardVisibility.default)();
  const handleValidatePress = (0, _react.useCallback)(() => {
    _reactNative.Keyboard.dismiss();
    setValidated(true);

    // calling the onclick later, after react has rerendered, to display the locking BG as soon as possible
    setTimeout(() => {
      validateButton.onClick();
    }, 20);

    // only to create on mount
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const {
    width
  } = (0, _reactNative.useWindowDimensions)();
  const slideStyle = (0, _react.useMemo)(() => createSlideStyle(num, width, isKeyboardVisible), [num, width, isKeyboardVisible]);
  const isFirstSlide = num === 1;
  const {
    loading,
    parentContentTitle,
    questionText,
    answerUI,
    showCorrectionPopin,
    animateCorrectionPopin
  } = slide;
  if (loading) {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: slideStyle.slide
    });
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [slideStyle.slide, animatedStyle]
  }, /*#__PURE__*/_react.default.createElement(Question, {
    questionOrigin: parentContentTitle,
    questionText: questionText,
    answerUI: answerUI,
    autoplayMedia: isFirstSlide,
    isKeyboardVisible: isKeyboardVisible,
    key: "question-container"
  }), isKeyboardVisible ? null : /*#__PURE__*/_react.default.createElement(_index3.default, {
    disabled: isValidated || validateButton.disabled,
    submitValue: validateButton.label,
    onPress: handleValidatePress,
    testID: `slide-validate-button-${slideIndex}`
  }), isValidated ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: slideStyle.hiddenBackgroundToLockActions
  }) : null, correctionPopinProps ? /*#__PURE__*/_react.default.createElement(CorrectionPopin, {
    correctionPopinProps: correctionPopinProps,
    slideIndex: slideIndex,
    showCorrectionPopin: showCorrectionPopin,
    animateCorrectionPopin: animateCorrectionPopin,
    key: "correction-popin"
  }) : null);
};
var _default = exports.default = Slide;
//# sourceMappingURL=index.native.js.map