import { useState } from 'react';
import { Dimensions, FlatList, Image, Modal, Pressable, StyleSheet, View } from 'react-native';
import { formatDuration } from '../../../core/utils/time';
import { Typography } from '../../../core/components/Typography/Typography';
import VideoPlayer from 'react-native-video-controls';
import ImageFeedSkeleton from '../../components/ImageFeedSkeleton/ImageFeedSkeleton';
const VideoGallery = ({
  posts,
  accessibilityId,
  isLoading,
  themeStyles,
  onNextPage
}) => {
  var _posts$currentImageIn;
  const {
    width
  } = Dimensions.get('window');
  const [openVideoViewer, setOpenVideoViewer] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const imageWidth = (width - 32 - 8) / 2;
  const styles = 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(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 = 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(Pressable, {
        onPress: () => {
          setCurrentImageIndex(index);
          setOpenVideoViewer(true);
        }
      }, /*#__PURE__*/React.createElement(Image, {
        source: {
          uri
        },
        style: styles.image,
        resizeMode: "cover"
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.duration
      }, /*#__PURE__*/React.createElement(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, {
      themeStyles: themeStyles
    }) : null,
    style: styles.container
  }), openVideoViewer && /*#__PURE__*/React.createElement(Modal, {
    visible: openVideoViewer,
    transparent: true,
    animationType: "fade",
    onRequestClose: () => setOpenVideoViewer(false)
  }, /*#__PURE__*/React.createElement(VideoPlayer, {
    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"
  })));
};
export default VideoGallery;
//# sourceMappingURL=VideoGallery.js.map