"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSvg = require("react-native-svg");
var _xml = require("../../../../../core/assets/icons/xml");
var _ImageItem = _interopRequireDefault(require("./components/ImageItem/ImageItem"));
var _ImageDefaultHeader = _interopRequireDefault(require("./components/ImageDefaultHeader"));
var _StatusBarManager = _interopRequireDefault(require("./components/StatusBarManager"));
var _useAnimatedComponents = _interopRequireDefault(require("./hooks/useAnimatedComponents"));
var _useImageIndexChange = _interopRequireDefault(require("./hooks/useImageIndexChange"));
var _useRequestClose = _interopRequireDefault(require("./hooks/useRequestClose"));
var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
var _useAuth = _interopRequireDefault(require("../../../../../core/hooks/useAuth"));
var _native = require("@react-navigation/native");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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); } /**
 * Copyright (c) JOB TODAY S.A. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */
const DEFAULT_ANIMATION_TYPE = 'fade';
const DEFAULT_BG_COLOR = '#000';
const DEFAULT_DELAY_LONG_PRESS = 800;
const SCREEN = _reactNative.Dimensions.get('screen');
const SCREEN_WIDTH = SCREEN.width;
function ImageViewing({
  images,
  keyExtractor,
  imageIndex,
  visible,
  onRequestClose,
  onLongPress = () => {},
  onImageIndexChange,
  animationType = DEFAULT_ANIMATION_TYPE,
  backgroundColor = DEFAULT_BG_COLOR,
  presentationStyle,
  swipeToCloseEnabled,
  doubleTapToZoomEnabled,
  delayLongPress = DEFAULT_DELAY_LONG_PRESS,
  HeaderComponent,
  FooterComponent,
  isVideoButton,
  onClickPlayButton = () => {},
  videoPosts
}) {
  const {
    apiRegion
  } = (0, _useAuth.default)();
  const navigation = (0, _native.useNavigation)();
  const imageList = (0, _react.useRef)(null);
  const [opacity, onRequestCloseEnhanced] = (0, _useRequestClose.default)(onRequestClose);
  const [currentImageIndex, onScroll] = (0, _useImageIndexChange.default)(imageIndex, SCREEN);
  const [headerTransform, footerTransform, toggleBarsVisible] = (0, _useAnimatedComponents.default)();
  const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
  const [playingUri, setPlayingUri] = (0, _react.useState)('');
  const videoPlayerRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (onImageIndexChange) {
      onImageIndexChange(currentImageIndex);
    }
  }, [currentImageIndex]);
  const onClosePlayer = () => {
    setIsPlaying(false);
    setPlayingUri('');
  };
  (0, _react.useEffect)(() => {
    if (!videoPosts) return onClosePlayer();
  }, [videoPosts]);
  const onZoom = (0, _react.useCallback)(isScaled => {
    var _a, _b;
    // @ts-ignore
    (_b = (_a = imageList) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({
      scrollEnabled: !isScaled
    });
    toggleBarsVisible(!isScaled);
  }, [imageList]);
  const playVideoFullScreen = async () => {
    if (_reactNative.Platform.OS === 'ios') {
      var _videoPosts$currentIm;
      onClickPlayButton(currentImageIndex);
      setPlayingUri(`https://api.${apiRegion}.amity.co/api/v3/files/${(_videoPosts$currentIm = videoPosts[currentImageIndex]) === null || _videoPosts$currentIm === void 0 || (_videoPosts$currentIm = _videoPosts$currentIm.videoFileId) === null || _videoPosts$currentIm === void 0 ? void 0 : _videoPosts$currentIm.original}/download`);
      setIsPlaying(true);
    } else {
      var _videoPosts$currentIm2;
      navigation.navigate('VideoPlayer', {
        source: `https://api.${apiRegion}.amity.co/api/v3/files/${(_videoPosts$currentIm2 = videoPosts[currentImageIndex]) === null || _videoPosts$currentIm2 === void 0 || (_videoPosts$currentIm2 = _videoPosts$currentIm2.videoFileId) === null || _videoPosts$currentIm2 === void 0 ? void 0 : _videoPosts$currentIm2.original}/download`
      });
      onRequestCloseEnhanced();
    }
  };

  // useEffect(() => {
  //   if (videoPlayerRef && playingUri.length > 0 && isPlaying) {
  //     videoPlayerRef.current.presentFullscreenPlayer();
  //   }
  // }, [playingUri, isPlaying])

  if (!visible) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
    transparent: presentationStyle === 'overFullScreen',
    visible: visible,
    presentationStyle: presentationStyle,
    animationType: animationType,
    onRequestClose: onRequestCloseEnhanced,
    supportedOrientations: ['portrait'],
    hardwareAccelerated: true
  }, /*#__PURE__*/_react.default.createElement(_StatusBarManager.default, {
    presentationStyle: presentationStyle
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.container, {
      opacity,
      backgroundColor
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.header, {
      transform: headerTransform
    }]
  }, typeof HeaderComponent !== 'undefined' ? (/*#__PURE__*/_react.default.createElement(HeaderComponent, {
    imageIndex: currentImageIndex
  })) : /*#__PURE__*/_react.default.createElement(_ImageDefaultHeader.default, {
    onRequestClose: onRequestCloseEnhanced
  })), /*#__PURE__*/_react.default.createElement(_reactNative.VirtualizedList, {
    ref: imageList,
    data: images,
    horizontal: true,
    pagingEnabled: true,
    windowSize: 2,
    initialNumToRender: 1,
    maxToRenderPerBatch: 1,
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false,
    initialScrollIndex: imageIndex,
    getItem: (_, index) => images[index],
    getItemCount: () => images.length,
    getItemLayout: (_, index) => ({
      length: SCREEN_WIDTH,
      offset: SCREEN_WIDTH * index,
      index
    }),
    renderItem: ({
      item: imageSrc
    }) => /*#__PURE__*/_react.default.createElement(_reactNative.View, null, !playingUri && /*#__PURE__*/_react.default.createElement(_ImageItem.default, {
      onZoom: onZoom,
      imageSrc: imageSrc,
      onRequestClose: onRequestCloseEnhanced,
      onLongPress: onLongPress,
      delayLongPress: delayLongPress,
      swipeToCloseEnabled: swipeToCloseEnabled,
      doubleTapToZoomEnabled: doubleTapToZoomEnabled
    }), isVideoButton && !playingUri && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
      style: styles.playButton,
      onPress: playVideoFullScreen
    }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.SvgXml, {
      xml: _xml.playBtn,
      width: "50",
      height: "50"
    }))),
    onMomentumScrollEnd: onScroll,
    keyExtractor: (imageSrc, index) => keyExtractor ? keyExtractor(imageSrc, index) : typeof imageSrc === 'number' ? `${imageSrc}` : imageSrc.uri
  }), typeof FooterComponent !== 'undefined' && /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.footer, {
      transform: footerTransform
    }]
  }, /*#__PURE__*/_react.default.createElement(FooterComponent, {
    imageIndex: currentImageIndex
  })), playingUri && /*#__PURE__*/_react.default.createElement(_reactNativeVideo.default, {
    resizeMode: "contain",
    style: {
      width: '100%',
      height: '100%'
    },
    controls: true,
    source: {
      uri: playingUri
    },
    onVideoFullscreenPlayerWillDismiss: onClosePlayer,
    ref: videoPlayerRef
  })));
}
const styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000'
  },
  header: {
    position: 'absolute',
    width: '100%',
    zIndex: 1,
    top: 0
  },
  footer: {
    position: 'absolute',
    width: '100%',
    zIndex: 1,
    bottom: 0
  },
  playButton: {
    width: 100,
    height: 100,
    borderRadius: 50,
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: [{
      translateX: -25
    }, {
      translateY: -25
    }]
  },
  playButtonImage: {
    width: 50,
    height: 50
  },
  videoContainer: {
    display: 'none'
  },
  video: {
    alignSelf: 'center',
    width: 320,
    height: 200
  }
});
const EnhancedImageViewing = props => /*#__PURE__*/_react.default.createElement(ImageViewing, _extends({
  key: props.imageIndex
}, props));
var _default = exports.default = EnhancedImageViewing;
//# sourceMappingURL=ImageViewing.js.map