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.
 *
 */
import React, { useCallback, useRef, useEffect, useState } from 'react';
import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, TouchableOpacity, Platform } from 'react-native';
import { SvgXml } from 'react-native-svg';
import { playBtn } from '../../../../../core/assets/icons/xml';
import ImageItem from './components/ImageItem/ImageItem';
import ImageDefaultHeader from './components/ImageDefaultHeader';
import StatusBarManager from './components/StatusBarManager';
import useAnimatedComponents from './hooks/useAnimatedComponents';
import useImageIndexChange from './hooks/useImageIndexChange';
import useRequestClose from './hooks/useRequestClose';
import Video from 'react-native-video';
import useAuth from '../../../../../core/hooks/useAuth';
import { useNavigation } from '@react-navigation/native';
const DEFAULT_ANIMATION_TYPE = 'fade';
const DEFAULT_BG_COLOR = '#000';
const DEFAULT_DELAY_LONG_PRESS = 800;
const SCREEN = 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
  } = useAuth();
  const navigation = useNavigation();
  const imageList = useRef(null);
  const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
  const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
  const [headerTransform, footerTransform, toggleBarsVisible] = useAnimatedComponents();
  const [isPlaying, setIsPlaying] = useState(false);
  const [playingUri, setPlayingUri] = useState('');
  const videoPlayerRef = useRef(null);
  useEffect(() => {
    if (onImageIndexChange) {
      onImageIndexChange(currentImageIndex);
    }
  }, [currentImageIndex]);
  const onClosePlayer = () => {
    setIsPlaying(false);
    setPlayingUri('');
  };
  useEffect(() => {
    if (!videoPosts) return onClosePlayer();
  }, [videoPosts]);
  const onZoom = 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 (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.createElement(Modal, {
    transparent: presentationStyle === 'overFullScreen',
    visible: visible,
    presentationStyle: presentationStyle,
    animationType: animationType,
    onRequestClose: onRequestCloseEnhanced,
    supportedOrientations: ['portrait'],
    hardwareAccelerated: true
  }, /*#__PURE__*/React.createElement(StatusBarManager, {
    presentationStyle: presentationStyle
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.container, {
      opacity,
      backgroundColor
    }]
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.header, {
      transform: headerTransform
    }]
  }, typeof HeaderComponent !== 'undefined' ? (/*#__PURE__*/React.createElement(HeaderComponent, {
    imageIndex: currentImageIndex
  })) : /*#__PURE__*/React.createElement(ImageDefaultHeader, {
    onRequestClose: onRequestCloseEnhanced
  })), /*#__PURE__*/React.createElement(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.createElement(View, null, !playingUri && /*#__PURE__*/React.createElement(ImageItem, {
      onZoom: onZoom,
      imageSrc: imageSrc,
      onRequestClose: onRequestCloseEnhanced,
      onLongPress: onLongPress,
      delayLongPress: delayLongPress,
      swipeToCloseEnabled: swipeToCloseEnabled,
      doubleTapToZoomEnabled: doubleTapToZoomEnabled
    }), isVideoButton && !playingUri && /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.playButton,
      onPress: playVideoFullScreen
    }, /*#__PURE__*/React.createElement(SvgXml, {
      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.createElement(Animated.View, {
    style: [styles.footer, {
      transform: footerTransform
    }]
  }, /*#__PURE__*/React.createElement(FooterComponent, {
    imageIndex: currentImageIndex
  })), playingUri && /*#__PURE__*/React.createElement(Video, {
    resizeMode: "contain",
    style: {
      width: '100%',
      height: '100%'
    },
    controls: true,
    source: {
      uri: playingUri
    },
    onVideoFullscreenPlayerWillDismiss: onClosePlayer,
    ref: videoPlayerRef
  })));
}
const styles = 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.createElement(ImageViewing, _extends({
  key: props.imageIndex
}, props));
export default EnhancedImageViewing;
//# sourceMappingURL=ImageViewing.js.map