"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _keys = _interopRequireDefault(require("lodash/fp/keys"));
var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
var _index = _interopRequireDefault(require("../review-slide/index.native"));
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 style = _reactNative.StyleSheet.create({
  slides: {
    flex: 1,
    height: '100%',
    width: '100%'
  }
});

/*
   - slides are ordered to be played from left to right: [0,1,2,3]
   - slides are piled on the view, so we need to reverse the order:
   -> it's like our eye is looking from the right [3,2,1,0] <-- oO
*/
const StackedSlides = props => {
  const {
    height: windowHeight
  } = (0, _reactNative.useWindowDimensions)();
  const {
    endReview,
    slides,
    validateButton,
    correctionPopinProps
  } = props;
  const [unstacked, setUnstacked] = (0, _react.useState)([]);
  const [restacking, setRestacking] = (0, _react.useState)(null);
  const [restackingDone, setRestackingDone] = (0, _react.useState)(false);
  const hideSlides = (0, _reactNativeAnimation.useTranslateY)({
    fromValue: 0,
    toValue: windowHeight,
    duration: 800
  });
  const translateDown = (0, _reactNativeAnimation.useTranslateY)({
    fromValue: 0,
    toValue: windowHeight - 100,
    duration: 500,
    easing: _reactNative.Easing.cubic
  });
  const restackTranslation = (0, _reactNativeAnimation.useAnimateProp)({
    property: 'opacity',
    toValue: 1,
    fromValue: 0,
    duration: 700
  });
  (0, _react.useEffect)(() => {
    if (endReview) {
      hideSlides.start();
    }
  }, [endReview, hideSlides]);
  const restackingSlide = (0, _keys.default)(slides).find(k => slides[k].animationType === 'restack');
  const unstackingSlide = (0, _keys.default)(slides).find(k => slides[k].animationType === 'unstack');
  const remainingKeys = (0, _keys.default)(slides).filter(k => slides[k].position >= 0 && !slides[k].animationType);
  const orderedKeys = remainingKeys.sort((k1, k2) => slides[k2].position > slides[k1].position ? 1 : -1);
  const animatedFrontSlide = unstackingSlide || (restackingSlide && restacking === null ? restackingSlide : undefined);
  const animatedRestackedSlide = restacking !== null;
  (0, _react.useEffect)(() => {
    if (restacking !== null && orderedKeys.includes(restacking)) {
      setRestacking(null);
      setRestackingDone(false);
    }
    // this effect is required only when the list orderedKeys changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [orderedKeys.toString()]);
  (0, _react.useEffect)(() => {
    const unstacking = unstackingSlide && !unstacked.includes(unstackingSlide);
    if (unstacking) {
      translateDown.start(() => {
        setUnstacked([...unstacked, unstackingSlide]);
      });
    }
  }, [unstackingSlide, unstacked, setUnstacked, translateDown]);
  (0, _react.useEffect)(() => {
    const startRestacking = !restackingDone && restackingSlide && restacking !== restackingSlide;
    if (startRestacking) {
      translateDown.start(() => {
        setRestacking(restackingSlide);
        restackTranslation.start(() => {
          setRestackingDone(true);
        });
      });
    }
    // this effect is required only to trigger the restack animation when a new restackingSlide is set
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [restackingSlide, restacking]);
  const stackedSlides = orderedKeys.map((slideIndex, index) => {
    const slide = slides[slideIndex];
    const num = orderedKeys.length - index;
    return /*#__PURE__*/_react.default.createElement(_index.default, {
      num,
      slideIndex,
      slide,
      validateButton,
      correctionPopinProps,
      key: slideIndex
    });
  });
  if (animatedFrontSlide) {
    stackedSlides.push(/*#__PURE__*/_react.default.createElement(_index.default, {
      num: 0,
      slideIndex: animatedFrontSlide,
      slide: slides[animatedFrontSlide],
      validateButton,
      correctionPopinProps,
      animatedStyle: [translateDown.animatedStyle],
      key: animatedFrontSlide
    }));
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [style.slides, hideSlides.animatedStyle]
  }, animatedRestackedSlide ? /*#__PURE__*/_react.default.createElement(_index.default, {
    num: orderedKeys.length + 1,
    slideIndex: restacking,
    slide: slides[restacking],
    validateButton,
    correctionPopinProps,
    animatedStyle: [restackTranslation.animatedStyle],
    key: restacking
  }) : null, stackedSlides);
};
var _default = exports.default = StackedSlides;
//# sourceMappingURL=index.native.js.map