import React from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import { Dimensions, ImageBackground, TouchableHighlight, View, StyleSheet } from "react-native";
import * as MediaLibrary from "expo-media-library";
import { Icon } from "@rneui/themed";
import moment from "moment";
import { getThumb300 } from "../../helper";
const screenWidth = Dimensions.get("window").width;
class ImageTile extends React.PureComponent {
  renderVideoOverlay() {
    const {
      item
    } = this.props;
    if (item.mediaType !== MediaLibrary.MediaType.video) return null;
    let durationText = "";
    if (item.duration) {
      const duration = moment.duration(item.duration, "seconds").asMilliseconds();
      durationText = moment.utc(duration).format("HH:mm:ss");
    }
    return /*#__PURE__*/React.createElement(View, {
      style: styles.defaultVideoOverlay
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "video-camera",
      type: "font-awesome",
      iconStyle: styles.videoIcon,
      style: styles.videoIconContainer
    }), /*#__PURE__*/React.createElement(Text, {
      style: styles.videoDurationText
    }, durationText));
  }
  renderSelectedOverlay() {
    const {
      selected,
      selectedItemNumber,
      renderSelectedComponent
    } = this.props;
    if (!selected) return null;
    if (renderSelectedComponent) return renderSelectedComponent(selectedItemNumber);
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.defaultSelectedOverlay, {
        opacity: selected ? 0.5 : 1
      }]
    });
  }
  render() {
    const {
      item,
      index,
      selectImage,
      width,
      height,
      style,
      isRemote
    } = this.props;
    if (!item) return null;
    const actualWidth = width || screenWidth / 4;
    const actualHeight = height || screenWidth / 4;
    const uri = isRemote ? getThumb300(item.uri) : item.uri;
    return /*#__PURE__*/React.createElement(TouchableHighlight, {
      underlayColor: "transparent",
      onPress: () => selectImage(item, index)
    }, /*#__PURE__*/React.createElement(View, {
      style: [{
        width: actualWidth,
        height: actualHeight
      }, style]
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.imageContainer
    }, /*#__PURE__*/React.createElement(ImageBackground, {
      style: styles.imageBackground,
      source: {
        uri
      }
    }, this.renderVideoOverlay(), this.renderSelectedOverlay()))));
  }
}
const styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  imageBackground: {
    width: "100%",
    height: "100%"
  },
  defaultSelectedOverlay: {
    flex: 1,
    backgroundColor: "#000"
  },
  defaultVideoOverlay: {
    position: "absolute",
    left: 3,
    bottom: 3,
    right: 3,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  videoIconContainer: {
    flex: 1,
    paddingRight: 8,
    paddingBottom: 1
  },
  videoIcon: {
    fontSize: 12,
    color: "#fff",
    textAlign: "right"
  },
  videoDurationText: {
    fontFamily: "sf-semibold",
    fontSize: 12,
    color: "#fff"
  }
});
export default ImageTile;
//# sourceMappingURL=ImageTile.js.map