var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.renderAttachmentPickerItem = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../../contexts/translationContext/TranslationContext");
var _useViewport3 = require("../../../hooks/useViewport");
var _icons = require("../../../icons");
var _utils = require("../../../utils/utils");
var _BottomSheetTouchableOpacity = require("../../BottomSheetCompatibility/BottomSheetTouchableOpacity");
var _jsxRuntime = require("react/jsx-runtime");
var _this = this,
  _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx";
var AttachmentVideo = function AttachmentVideo(props) {
  var asset = props.asset,
    ImageOverlaySelectedComponent = props.ImageOverlaySelectedComponent,
    maxNumberOfFiles = props.maxNumberOfFiles,
    numberOfAttachmentPickerImageColumns = props.numberOfAttachmentPickerImageColumns,
    numberOfUploads = props.numberOfUploads,
    selected = props.selected,
    selectedFiles = props.selectedFiles,
    setSelectedFiles = props.setSelectedFiles;
  var _useViewport = (0, _useViewport3.useViewport)(),
    vw = _useViewport.vw;
  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex.t;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme = _useTheme.theme,
    _useTheme$theme$attac = _useTheme$theme.attachmentPicker,
    durationText = _useTheme$theme$attac.durationText,
    image = _useTheme$theme$attac.image,
    imageOverlay = _useTheme$theme$attac.imageOverlay,
    _useTheme$theme$color = _useTheme$theme.colors,
    overlay = _useTheme$theme$color.overlay,
    white = _useTheme$theme$color.white;
  var videoDuration = asset.duration,
    thumb_url = asset.thumb_url,
    uri = asset.uri;
  var durationLabel = videoDuration ? (0, _utils.getDurationLabelFromDuration)(videoDuration) : '00:00';
  var size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
  var updateSelectedFiles = function updateSelectedFiles() {
    if (numberOfUploads >= maxNumberOfFiles) {
      _reactNative.Alert.alert(t('Maximum number of files reached'));
      return;
    }
    setSelectedFiles([].concat((0, _toConsumableArray2["default"])(selectedFiles), [asset]));
  };
  var onPressVideo = function onPressVideo() {
    if (selected) {
      setSelectedFiles(function (files) {
        return (files.filter(function (file) {
            return file.uri !== uri;
          })
        );
      });
    } else {
      updateSelectedFiles();
    }
  };
  return (0, _jsxRuntime.jsx)(_BottomSheetTouchableOpacity.BottomSheetTouchableOpacity, {
    onPress: onPressVideo,
    children: (0, _jsxRuntime.jsxs)(_reactNative.ImageBackground, {
      source: {
        uri: thumb_url
      },
      style: [{
        height: size,
        margin: 1,
        width: size
      }, image],
      children: [selected && (0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [styles.overlay, {
          backgroundColor: overlay
        }, imageOverlay],
        children: (0, _jsxRuntime.jsx)(ImageOverlaySelectedComponent, {})
      }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: styles.videoView,
        children: [(0, _jsxRuntime.jsx)(_icons.Recorder, {
          height: 20,
          pathFill: white,
          width: 20
        }), videoDuration ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [{
            color: white
          }, styles.durationText, durationText],
          children: durationLabel
        }) : null]
      })]
    })
  });
};
var AttachmentImage = function AttachmentImage(props) {
  var asset = props.asset,
    ImageOverlaySelectedComponent = props.ImageOverlaySelectedComponent,
    maxNumberOfFiles = props.maxNumberOfFiles,
    numberOfAttachmentPickerImageColumns = props.numberOfAttachmentPickerImageColumns,
    numberOfUploads = props.numberOfUploads,
    selected = props.selected,
    selectedImages = props.selectedImages,
    setSelectedImages = props.setSelectedImages;
  var _useTheme2 = (0, _ThemeContext.useTheme)(),
    _useTheme2$theme = _useTheme2.theme,
    _useTheme2$theme$atta = _useTheme2$theme.attachmentPicker,
    image = _useTheme2$theme$atta.image,
    imageOverlay = _useTheme2$theme$atta.imageOverlay,
    overlay = _useTheme2$theme.colors.overlay;
  var _useViewport2 = (0, _useViewport3.useViewport)(),
    vw = _useViewport2.vw;
  var _useTranslationContex2 = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex2.t;
  var size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
  var uri = asset.uri;
  var updateSelectedImages = function updateSelectedImages() {
    if (numberOfUploads >= maxNumberOfFiles) {
      _reactNative.Alert.alert(t('Maximum number of files reached'));
      return;
    }
    setSelectedImages([].concat((0, _toConsumableArray2["default"])(selectedImages), [asset]));
  };
  var onPressImage = function onPressImage() {
    if (selected) {
      setSelectedImages(function (images) {
        return images.filter(function (image) {
          return image.uri !== uri;
        });
      });
    } else {
      updateSelectedImages();
    }
  };
  return (0, _jsxRuntime.jsx)(_BottomSheetTouchableOpacity.BottomSheetTouchableOpacity, {
    onPress: onPressImage,
    children: (0, _jsxRuntime.jsx)(_reactNative.ImageBackground, {
      source: {
        uri: uri
      },
      style: [{
        height: size,
        margin: 1,
        width: size
      }, image],
      children: selected && (0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [styles.overlay, {
          backgroundColor: overlay
        }, imageOverlay],
        children: (0, _jsxRuntime.jsx)(ImageOverlaySelectedComponent, {})
      })
    })
  });
};
var renderAttachmentPickerItem = exports.renderAttachmentPickerItem = function renderAttachmentPickerItem(_ref) {
  var item = _ref.item;
  var asset = item.asset,
    ImageOverlaySelectedComponent = item.ImageOverlaySelectedComponent,
    maxNumberOfFiles = item.maxNumberOfFiles,
    numberOfAttachmentPickerImageColumns = item.numberOfAttachmentPickerImageColumns,
    numberOfUploads = item.numberOfUploads,
    selected = item.selected,
    selectedFiles = item.selectedFiles,
    selectedImages = item.selectedImages,
    setSelectedFiles = item.setSelectedFiles,
    setSelectedImages = item.setSelectedImages;
  var isVideoType = asset.type.includes('video');
  if (isVideoType) {
    return (0, _jsxRuntime.jsx)(AttachmentVideo, {
      asset: asset,
      ImageOverlaySelectedComponent: ImageOverlaySelectedComponent,
      maxNumberOfFiles: maxNumberOfFiles,
      numberOfAttachmentPickerImageColumns: numberOfAttachmentPickerImageColumns,
      numberOfUploads: numberOfUploads,
      selected: selected,
      selectedFiles: selectedFiles,
      setSelectedFiles: setSelectedFiles
    });
  }
  return (0, _jsxRuntime.jsx)(AttachmentImage, {
    asset: asset,
    ImageOverlaySelectedComponent: ImageOverlaySelectedComponent,
    maxNumberOfFiles: maxNumberOfFiles,
    numberOfAttachmentPickerImageColumns: numberOfAttachmentPickerImageColumns,
    numberOfUploads: numberOfUploads,
    selected: selected,
    selectedImages: selectedImages,
    setSelectedImages: setSelectedImages
  });
};
var styles = _reactNative.StyleSheet.create({
  durationText: {
    fontWeight: 'bold'
  },
  overlay: {
    alignItems: 'flex-end',
    flex: 1
  },
  videoView: {
    bottom: 5,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 5,
    position: 'absolute',
    width: '100%'
  }
});
//# sourceMappingURL=AttachmentPickerItem.js.map