import { useState } from 'react';
import { FlatList, View, Image, TouchableOpacity } from 'react-native';
import { useStyles } from './styles';
import Skeleton from '../../../core/components/Skeleton/Skeleton';
import { Typography } from '../../../core/components/Typography/Typography';
import { formatDuration } from '../../../core/utils/time';
import { Empty } from '../Empty';
export function Gallery({
  data,
  renderItem,
  keyExtractor,
  isLoading,
  renderEmpty,
  testID
}) {
  const {
    styles
  } = useStyles();
  return /*#__PURE__*/React.createElement(View, {
    testID: testID,
    style: styles.container
  }, /*#__PURE__*/React.createElement(FlatList, {
    data: data,
    numColumns: 2,
    scrollEnabled: false,
    renderItem: renderItem,
    keyExtractor: keyExtractor,
    ItemSeparatorComponent: RowSeparator,
    columnWrapperStyle: styles.columnWrapper,
    ListEmptyComponent: isLoading ? null : renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty(),
    ListFooterComponent: isLoading ? /*#__PURE__*/React.createElement(GallerySkeleton, null) : null
  }));
}
function GalleryItem({
  uri,
  timestamp,
  onPress
}) {
  const {
    styles
  } = useStyles();
  const [hasError, setHasError] = useState(false);
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    hitSlop: 0.8,
    onPress: onPress,
    disabled: hasError,
    style: styles.cell
  }, hasError ? /*#__PURE__*/React.createElement(Skeleton.Square, {
    radius: 8,
    width: "100%",
    height: "100%",
    shimmer: false
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
    style: styles.cellImage,
    source: {
      uri
    },
    onError: () => setHasError(true)
  }), timestamp !== undefined && /*#__PURE__*/React.createElement(View, {
    style: styles.timestampContainer
  }, /*#__PURE__*/React.createElement(Typography.Caption, {
    style: styles.timestamp
  }, formatDuration(timestamp)))));
}
const NUM_ROWS = 3;
function GallerySkeleton() {
  const {
    styles
  } = useStyles();
  return /*#__PURE__*/React.createElement(Skeleton, null, Array.from({
    length: NUM_ROWS
  }).map((_, i) => /*#__PURE__*/React.createElement(Skeleton, {
    key: i
  }, /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.columnWrapper
  }, /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.cell
  }, /*#__PURE__*/React.createElement(Skeleton.Square, {
    width: "100%",
    height: "100%",
    radius: 8
  })), /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.cell
  }, /*#__PURE__*/React.createElement(Skeleton.Square, {
    width: "100%",
    height: "100%",
    radius: 8
  }))), i < NUM_ROWS - 1 && /*#__PURE__*/React.createElement(Skeleton, {
    style: styles.rowSeparator
  }))));
}
function RowSeparator() {
  const {
    styles
  } = useStyles();
  return /*#__PURE__*/React.createElement(View, {
    style: styles.rowSeparator
  });
}
function GalleryEmpty({
  heightPercent = 0.4,
  ...props
}) {
  return /*#__PURE__*/React.createElement(Empty, {
    heightPercent: heightPercent
  }, /*#__PURE__*/React.createElement(Empty.Content, props));
}
Gallery.Item = GalleryItem;
Gallery.Skeleton = GallerySkeleton;
Gallery.Empty = GalleryEmpty;
Gallery.Separator = RowSeparator;
//# sourceMappingURL=Gallery.js.map