"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _expoAv = require("expo-av");
var _pearl = require("../../../pearl");
var _reactNative = require("react-native");
var _expoBlur = require("expo-blur");
var _box = _interopRequireDefault(require("../../atoms/box/box"));
var _spinner = _interopRequireDefault(require("../../atoms/spinner/spinner"));
var _center = _interopRequireDefault(require("../../atoms/center/center"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 && Object.prototype.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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const PearlRNImage = (0, _pearl.pearl)(_reactNative.Image, {
  componentName: "",
  type: "basic",
  animatable: true
});
const PearlExpoVideo = (0, _pearl.pearl)(_expoAv.Video, {
  componentName: "Video",
  type: "basic",
  animatable: true
});
const AnimatedView = _reactNative.Animated.createAnimatedComponent(_reactNative.View);
const AnimatedBlurView = _reactNative.Animated.createAnimatedComponent(_expoBlur.BlurView);
const PearlAnimatedBlurView = (0, _pearl.pearl)(AnimatedBlurView, {
  componentName: "",
  type: "basic",
  animatable: true
});
const PearlAnimatedView = (0, _pearl.pearl)(AnimatedView, {
  componentName: "",
  type: "basic",
  animatable: true
});
const BaseVideo = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  atoms
}, ref) => {
  const {
    source,
    onError,
    testID,
    previewSource,
    fallbackSource,
    fallbackComponent,
    previewColor,
    tint = "dark",
    loaderType = "spinner",
    sourceDelay = 0,
    overlayTransitionDuration = 300,
    onLoad,
    onLoadStart,
    ...restVideoProps
  } = atoms.video;
  const isRemoteVideo = typeof source === "object";
  const [error, setError] = (0, _react.useState)(false);
  const [hasVideoLoaded, setHasVideoLoaded] = (0, _react.useState)(false);
  const intensity = (0, _react.useRef)(new _reactNative.Animated.Value(100)).current;
  const previewSourceOverlayOpacity = intensity.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1]
  });
  const blurIntensity = intensity.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 50]
  });
  const finalImageOpacity = intensity.interpolate({
    inputRange: [0, 100],
    outputRange: [1, 0.75]
  });
  const backwardCompatibleTintOverlayOpacity = intensity.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 0.5]
  });
  const previewColorOverlayOpacity = intensity.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1]
  });

  // Separate out border radius properties
  const {
    borderRadius,
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderTopLeftRadius,
    borderTopRightRadius,
    ...finalContainerProps
  } = atoms.container;
  const borderRadiiStyles = (0, _react.useMemo)(() => ({
    borderRadius,
    borderBottomLeftRadius,
    borderBottomRightRadius,
    borderTopLeftRadius,
    borderTopRightRadius
  }), [borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius]);

  // A handler function for catching errors while loading the video
  const onErrorHandler = error => {
    setError(true);
    if (onError) onError(error);
  };
  const renderFallback = (0, _react.useCallback)(() => {
    if (error) {
      if (!!fallbackComponent) {
        return /*#__PURE__*/_react.default.createElement(_box.default, _extends({
          overflow: "hidden"
        }, borderRadiiStyles, {
          style: {
            zIndex: 4
          }
        }), /*#__PURE__*/_react.default.cloneElement(fallbackComponent));
      }
      if (!!fallbackSource) {
        return /*#__PURE__*/_react.default.createElement(PearlRNImage, _extends({}, atoms.fallbackImage, borderRadiiStyles, {
          zIndex: 3,
          width: "100%",
          height: "100%",
          source: fallbackSource,
          style: _reactNative.StyleSheet.absoluteFill
        }));
      }
    }
    return null;
  }, [error, fallbackComponent, fallbackSource, borderRadiiStyles, atoms.fallbackImage]);
  const renderVideo = (0, _react.useCallback)(() => {
    return /*#__PURE__*/_react.default.createElement(AnimatedView, {
      style: [_reactNative.StyleSheet.absoluteFill, {
        zIndex: 3,
        width: "100%",
        height: "100%",
        opacity: finalImageOpacity
      }]
    }, /*#__PURE__*/_react.default.createElement(PearlExpoVideo, _extends({}, restVideoProps, borderRadiiStyles, {
      ref: ref,
      visible: hasVideoLoaded,
      onLoad: async status => {
        await new Promise(resolve => setTimeout(resolve, sourceDelay));
        if (onLoad) onLoad(status);
        if (status.isLoaded) _reactNative.Animated.timing(intensity, {
          toValue: 0,
          duration: overlayTransitionDuration,
          useNativeDriver: _reactNative.Platform.OS === "android"
        }).start();
        setHasVideoLoaded(true);
      },
      onLoadStart: () => {
        if (_reactNative.Platform.OS === "ios") {
          setTimeout(() => {
            if (!hasVideoLoaded) {
              setError(true);
            }
          }, 1000);
        }
        if (onLoadStart) onLoadStart();
      },
      onError: onErrorHandler,
      testID: testID,
      source: source,
      width: "100%",
      height: "100%"
    })));
  }, [restVideoProps, borderRadiiStyles, ref, hasVideoLoaded, onLoad, isRemoteVideo, intensity, overlayTransitionDuration, onLoadStart, onErrorHandler, testID, source]);
  const renderPreview = (0, _react.useCallback)(() => {
    if (intensity._value === 0) return null;
    if (!!previewSource) {
      return /*#__PURE__*/_react.default.createElement(AnimatedView, {
        style: {
          width: "100%",
          height: "100%",
          opacity: previewSourceOverlayOpacity
        }
      }, /*#__PURE__*/_react.default.createElement(PearlRNImage, _extends({}, atoms.previewImage, borderRadiiStyles, {
        source: previewSource,
        zIndex: 1,
        width: "100%",
        height: "100%",
        style: _reactNative.StyleSheet.absoluteFill,
        blurRadius: _reactNative.Platform.OS === "android" || _reactNative.Platform.OS === "web" ? 0.5 : 0
      })));
    }
  }, [intensity, previewSource, borderRadiiStyles, atoms.previewImage]);
  const renderImageLoader = (0, _react.useCallback)(() => {
    if (intensity._value === 0) return null;
    if (loaderType === "progressive") {
      if (!!previewSource) {
        if (_reactNative.Platform.OS === "ios" && tint !== "none") {
          return /*#__PURE__*/_react.default.createElement(PearlAnimatedBlurView, _extends({
            tint: tint
          }, borderRadiiStyles, {
            zIndex: 3,
            overflow: "hidden",
            alignItems: "center",
            justifyContent: "center",
            intensity: blurIntensity,
            style: [_reactNative.StyleSheet.absoluteFill]
          }), renderFallback());
        } else {
          return /*#__PURE__*/_react.default.createElement(AnimatedView, {
            style: [_reactNative.StyleSheet.absoluteFill, {
              zIndex: 3,
              width: "100%",
              height: "100%",
              opacity: backwardCompatibleTintOverlayOpacity
            }]
          }, /*#__PURE__*/_react.default.createElement(_box.default, _extends({}, borderRadiiStyles, {
            w: "100%",
            h: "100%",
            overflow: "hidden",
            alignItems: "center",
            justifyContent: "center",
            bgColor: tint === "none" ? undefined : tint === "light" ? "white" : "black"
          }), renderFallback()));
        }
      }
      if (!!previewColor) {
        return /*#__PURE__*/_react.default.createElement(AnimatedView, {
          style: {
            zIndex: 3,
            width: "100%",
            height: "100%",
            opacity: previewColorOverlayOpacity
          }
        }, /*#__PURE__*/_react.default.createElement(_box.default, _extends({}, borderRadiiStyles, {
          w: "100%",
          h: "100%",
          overflow: "hidden",
          alignItems: "center",
          justifyContent: "center",
          bgColor: previewColor
        }), renderFallback()));
      }
    }
    if (loaderType === "spinner") {
      if (!error) return /*#__PURE__*/_react.default.createElement(_box.default, {
        width: "100%",
        height: "100%",
        style: _reactNative.StyleSheet.absoluteFill
      }, /*#__PURE__*/_react.default.createElement(_spinner.default, _extends({}, atoms.spinner, {
        isExpanded: true
      })));
      return renderFallback();
    }
  }, [intensity, loaderType, previewSource, borderRadiiStyles, tint, blurIntensity, previewSourceOverlayOpacity, renderFallback, previewColor, previewColorOverlayOpacity, error, atoms.spinner]);
  (0, _react.useEffect)(() => {
    setHasVideoLoaded(false);
    intensity.setValue(100);
  }, [JSON.stringify(source)]);
  return /*#__PURE__*/_react.default.createElement(_center.default, _extends({}, finalContainerProps, borderRadiiStyles, {
    accessible: true,
    accessibilityRole: "image"
  }), renderVideo(), renderPreview(), renderImageLoader());
}));

/**
 * Video is the most abstract component on top of which all other Pearl UI components are built.
 */
const Video = (0, _pearl.pearl)(BaseVideo, {
  componentName: "Video",
  type: "molecule",
  animatable: true
}, undefined, {
  partForOverridenStyleProps: "container",
  partForOverridenNativeProps: "video",
  partForOverridenAnimationProps: "container"
});
Video.displayName = "Video";
var _default = exports.default = Video;
//# sourceMappingURL=video.js.map