import { useState } from 'react';
import { Dimensions, FlatList, Image, Pressable, StyleSheet, Modal } from 'react-native';
import ImageViewer from '../ImageViewer/ImageViewer';
import ImageFeedSkeleton from '../../components/ImageFeedSkeleton/ImageFeedSkeleton';
const ImageGallery = ({
  posts,
  accessibilityId,
  isLoading,
  themeStyles,
  onNextPage
}) => {
  const {
    width
  } = Dimensions.get('window');
  const [openImageViewer, setOpenImageViewer] = 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
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlatList, {
    accessibilityLabel: accessibilityId,
    testID: accessibilityId,
    data: posts,
    scrollEnabled: false,
    keyExtractor: item => item.data.fileId,
    renderItem: ({
      item,
      index
    }) => {
      const uri = item.getImageInfo().fileUrl + '?size=medium';
      return /*#__PURE__*/React.createElement(Pressable, {
        onPress: () => {
          setCurrentImageIndex(index);
          setOpenImageViewer(true);
        }
      }, /*#__PURE__*/React.createElement(Image, {
        source: {
          uri
        },
        style: styles.image,
        resizeMode: "cover"
      }));
    },
    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
  }), openImageViewer && /*#__PURE__*/React.createElement(Modal, {
    visible: openImageViewer,
    transparent: true,
    animationType: "fade",
    onRequestClose: () => setOpenImageViewer(false)
  }, /*#__PURE__*/React.createElement(ImageViewer, {
    images: (posts === null || posts === void 0 ? void 0 : posts.map(item => item.getImageInfo().fileUrl + '?size=medium')) || [],
    currentImageIndex: currentImageIndex,
    themeStyles: themeStyles,
    onNextImage: () => {
      if (currentImageIndex < ((posts === null || posts === void 0 ? void 0 : posts.length) || 0) - 1) {
        setCurrentImageIndex(currentImageIndex + 1);
      }
    },
    onPreviousImage: () => {
      if (currentImageIndex > 0) {
        setCurrentImageIndex(currentImageIndex - 1);
      }
    },
    onClose: () => {
      setOpenImageViewer(false);
    }
  })));
};
export default ImageGallery;
//# sourceMappingURL=ImageGallery.js.map