"use strict";

exports.__esModule = true;
exports.default = void 0;
var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _templateContext = require("../../template/app-review/template-context");
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 createStyleSheet = theme => _reactNative.StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  dot: {
    position: 'absolute'
  },
  blue: {
    backgroundColor: theme.colors.cta
  },
  red: {
    backgroundColor: theme.colors.negative
  },
  green: {
    backgroundColor: theme.colors.positive
  },
  yellow: {
    backgroundColor: theme.colors.battle
  }
});
const CYCLE_DURATION = 3000;
const MIN_TIME = 1000;
const Loader = props => {
  const templateContext = (0, _templateContext.useTemplateContext)();
  const {
    theme
  } = templateContext;
  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
  const [hidden, setHidden] = (0, _react.useState)(false);
  const [minTimeIsSpent, setMinTimeSpent] = (0, _react.useState)(false);
  const rotation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const hideAnimation = (0, _reactNativeAnimation.useAnimateProp)({
    property: 'opacity',
    fromValue: 1,
    toValue: 0,
    onComplete: () => {
      setHidden(true);
    }
  });
  const {
    height = 60,
    color,
    readyToHide
  } = props;
  (0, _react.useEffect)(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  (0, _react.useEffect)(() => {
    if (readyToHide && minTimeIsSpent && !hidden) {
      hideAnimation.start();
    }
  }, [hidden, hideAnimation, readyToHide, minTimeIsSpent]);
  (0, _react.useEffect)(() => {
    setTimeout(() => {
      setMinTimeSpent(true);
    }, MIN_TIME);
    const _animation = _reactNative.Animated.parallel([_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
      toValue: 0,
      duration: 0,
      useNativeDriver: false
    }), _reactNative.Animated.timing(scale, {
      toValue: 1,
      duration: CYCLE_DURATION,
      useNativeDriver: false,
      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
    }), _reactNative.Animated.timing(scale, {
      toValue: 2,
      duration: CYCLE_DURATION,
      useNativeDriver: false,
      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
    }), _reactNative.Animated.timing(scale, {
      toValue: 3,
      duration: CYCLE_DURATION,
      useNativeDriver: false,
      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
    })])), _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(rotation, {
      toValue: 0,
      duration: 0,
      useNativeDriver: false
    }), _reactNative.Animated.timing(rotation, {
      toValue: 1,
      duration: CYCLE_DURATION,
      useNativeDriver: false,
      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
    })]))]);
    _animation.start();
    return () => {
      _animation.stop();
    };
    // eslint bad warning --> effect only onmount
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  if (!styleSheet) {
    return null;
  }
  if (hidden) {
    return null;
  }
  const interpolatedScale = scale.interpolate({
    inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],
    outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]
  });
  const interpolatedRotation = rotation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  });
  const dotWidth = rotation.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [height / 2, height / 6, height / 2]
  });
  const dotTranslate = rotation.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]
  });
  const dotStyle = {
    width: dotWidth,
    height: height / 6,
    borderRadius: height / 12
  };
  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: hideAnimation.animatedStyle
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styleSheet.container, {
      height,
      width: height,
      transform: [{
        scaleX: interpolatedScale
      }, {
        scaleY: interpolatedScale
      }, {
        rotateZ: interpolatedRotation
      }]
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styleSheet.dot, color ? {
      backgroundColor: color
    } : styleSheet.red, dotStyle, {
      transform: [{
        rotateZ: '45deg'
      }, {
        translateX: dotTranslate
      }]
    }]
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styleSheet.dot, color ? {
      backgroundColor: color
    } : styleSheet.green, dotStyle, {
      transform: [{
        rotateZ: '135deg'
      }, {
        translateX: dotTranslate
      }]
    }]
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styleSheet.dot, color ? {
      backgroundColor: color
    } : styleSheet.yellow, dotStyle, {
      transform: [{
        rotateZ: '225deg'
      }, {
        translateX: dotTranslate
      }]
    }]
  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styleSheet.dot, color ? {
      backgroundColor: color
    } : styleSheet.blue, dotStyle, {
      transform: [{
        rotateZ: '315deg'
      }, {
        translateX: dotTranslate
      }]
    }]
  })));
};
var _default = exports.default = Loader;
//# sourceMappingURL=index.native.js.map