"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _time = require("../../../core/utils/time");
var _Typography = require("../../../core/components/Typography/Typography");
var _reactNativeVideoControls = _interopRequireDefault(require("react-native-video-controls"));
var _ImageFeedSkeleton = _interopRequireDefault(require("../../components/ImageFeedSkeleton/ImageFeedSkeleton"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const VideoGallery = ({
  posts,
  accessibilityId,
  isLoading,
  themeStyles,
  onNextPage
}) => {
  var _posts$currentImageIn;
  const {
    width
  } = _reactNative.Dimensions.get('window');
  const [openVideoViewer, setOpenVideoViewer] = (0, _react.useState)(false);
  const [currentImageIndex, setCurrentImageIndex] = (0, _react.useState)(0);
  const imageWidth = (width - 32 - 8) / 2;
  const styles = _reactNative.StyleSheet.create({
    container: {
      flex: 1,
      padding: 16
    },
    contentContainer: {
      gap: 8
    },
    columnWrapper: {
      justifyContent: 'space-between'
    },
    image: {
      width: imageWidth,
      height: imageWidth,
      borderRadius: 8
    },
    duration: {
      position: 'absolute',
      bottom: 8,
      left: 8,
      borderRadius: 4,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      paddingHorizontal: 4,
      paddingVertical: 1
    },
    durationText: {
      color: 'white'
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.FlatList, {
    accessibilityLabel: accessibilityId,
    testID: accessibilityId,
    data: posts,
    scrollEnabled: false,
    keyExtractor: (item, index) => item.data.videoFileId + index.toString(),
    renderItem: ({
      item,
      index
    }) => {
      var _videoInfo$attributes;
      const videoThumbnailInfo = item.getVideoThumbnailInfo();
      const uri = videoThumbnailInfo !== null && videoThumbnailInfo !== void 0 && videoThumbnailInfo.fileUrl ? videoThumbnailInfo.fileUrl + '?size=medium' : undefined;
      const videoInfo = item.getVideoInfo();
      const duration = (0, _time.formatDuration)(videoInfo === null || videoInfo === void 0 || (_videoInfo$attributes = videoInfo.attributes) === null || _videoInfo$attributes === void 0 || (_videoInfo$attributes = _videoInfo$attributes.metadata) === null || _videoInfo$attributes === void 0 || (_videoInfo$attributes = _videoInfo$attributes.video) === null || _videoInfo$attributes === void 0 ? void 0 : _videoInfo$attributes.duration);
      return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
        onPress: () => {
          setCurrentImageIndex(index);
          setOpenVideoViewer(true);
        }
      }, /*#__PURE__*/React.createElement(_reactNative.Image, {
        source: {
          uri
        },
        style: styles.image,
        resizeMode: "cover"
      }), /*#__PURE__*/React.createElement(_reactNative.View, {
        style: styles.duration
      }, /*#__PURE__*/React.createElement(_Typography.Typography.Caption, {
        style: styles.durationText
      }, duration)));
    },
    numColumns: 2,
    onEndReachedThreshold: 0.5,
    columnWrapperStyle: styles.columnWrapper,
    contentContainerStyle: styles.contentContainer,
    onEndReached: () => {
      onNextPage === null || onNextPage === void 0 || onNextPage();
    },
    ListEmptyComponent: isLoading ? /*#__PURE__*/React.createElement(_ImageFeedSkeleton.default, {
      themeStyles: themeStyles
    }) : null,
    style: styles.container
  }), openVideoViewer && /*#__PURE__*/React.createElement(_reactNative.Modal, {
    visible: openVideoViewer,
    transparent: true,
    animationType: "fade",
    onRequestClose: () => setOpenVideoViewer(false)
  }, /*#__PURE__*/React.createElement(_reactNativeVideoControls.default, {
    onBack: () => setOpenVideoViewer(false),
    fullscreen: true,
    playWhenInactive: false,
    playInBackground: false,
    source: {
      uri: (_posts$currentImageIn = posts[currentImageIndex].getVideoInfo()) === null || _posts$currentImageIn === void 0 ? void 0 : _posts$currentImageIn.fileUrl
    },
    fullscreenOrientation: "all"
  })));
};
var _default = exports.default = VideoGallery;
//# sourceMappingURL=VideoGallery.js.map