"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Gallery = Gallery;
var _react = require("react");
var _reactNative = require("react-native");
var _styles = require("./styles");
var _Skeleton = _interopRequireDefault(require("../../../core/components/Skeleton/Skeleton"));
var _Typography = require("../../../core/components/Typography/Typography");
var _time = require("../../../core/utils/time");
var _Empty = require("../Empty");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Gallery({
  data,
  renderItem,
  keyExtractor,
  isLoading,
  renderEmpty,
  testID
}) {
  const {
    styles
  } = (0, _styles.useStyles)();
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    testID: testID,
    style: styles.container
  }, /*#__PURE__*/React.createElement(_reactNative.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
  } = (0, _styles.useStyles)();
  const [hasError, setHasError] = (0, _react.useState)(false);
  return /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    hitSlop: 0.8,
    onPress: onPress,
    disabled: hasError,
    style: styles.cell
  }, hasError ? /*#__PURE__*/React.createElement(_Skeleton.default.Square, {
    radius: 8,
    width: "100%",
    height: "100%",
    shimmer: false
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.Image, {
    style: styles.cellImage,
    source: {
      uri
    },
    onError: () => setHasError(true)
  }), timestamp !== undefined && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.timestampContainer
  }, /*#__PURE__*/React.createElement(_Typography.Typography.Caption, {
    style: styles.timestamp
  }, (0, _time.formatDuration)(timestamp)))));
}
const NUM_ROWS = 3;
function GallerySkeleton() {
  const {
    styles
  } = (0, _styles.useStyles)();
  return /*#__PURE__*/React.createElement(_Skeleton.default, null, Array.from({
    length: NUM_ROWS
  }).map((_, i) => /*#__PURE__*/React.createElement(_Skeleton.default, {
    key: i
  }, /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.columnWrapper
  }, /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.cell
  }, /*#__PURE__*/React.createElement(_Skeleton.default.Square, {
    width: "100%",
    height: "100%",
    radius: 8
  })), /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.cell
  }, /*#__PURE__*/React.createElement(_Skeleton.default.Square, {
    width: "100%",
    height: "100%",
    radius: 8
  }))), i < NUM_ROWS - 1 && /*#__PURE__*/React.createElement(_Skeleton.default, {
    style: styles.rowSeparator
  }))));
}
function RowSeparator() {
  const {
    styles
  } = (0, _styles.useStyles)();
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.rowSeparator
  });
}
function GalleryEmpty({
  heightPercent = 0.4,
  ...props
}) {
  return /*#__PURE__*/React.createElement(_Empty.Empty, {
    heightPercent: heightPercent
  }, /*#__PURE__*/React.createElement(_Empty.Empty.Content, props));
}
Gallery.Item = GalleryItem;
Gallery.Skeleton = GallerySkeleton;
Gallery.Empty = GalleryEmpty;
Gallery.Separator = RowSeparator;
//# sourceMappingURL=Gallery.js.map