function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import _ from "lodash";
import moment from "moment";
import { Dimensions, Modal, TouchableOpacity, StyleSheet, View, Image } from "react-native";
import ImageViewer from "react-native-image-zoom-viewer";
import { Icon } from "@rneui/themed";
import { StatusBarHeight, isVideo, get1400 } from "../helper";
import { FontAwesome } from "./Icon";
import { SharingTools } from "./SharingTools";
import { VideoPopup } from "./VideoPopup";
import { ProfilePic } from "./ProfilePic";
import { LoadingIndicator } from "./";
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
const MAX_IMAGE_HEIGHT = SCREEN_HEIGHT * 0.65;
class ImagePopup extends Component {
  constructor(_props) {
    super(_props);
    _defineProperty(this, "setupUrls", async () => {
      if (!this.props.images) return;
      const images = this.props.images.map(image => {
        if (typeof image === "string") {
          return {
            url: get1400(image),
            original: image,
            isVideo: isVideo(image)
          };
        }
        return {
          url: get1400(image === null || image === void 0 ? void 0 : image.uri),
          original: image === null || image === void 0 ? void 0 : image.uri,
          isVideo: isVideo(image === null || image === void 0 ? void 0 : image.uri),
          date: image === null || image === void 0 ? void 0 : image.date,
          user: image === null || image === void 0 ? void 0 : image.user,
          caption: image === null || image === void 0 ? void 0 : image.caption
        };
      });
      this.setState({
        isLoadingDimensions: true
      });
      const dimensions = {};
      await Promise.all(images.map(async image => {
        if (!image.url) return;
        try {
          const {
            width,
            height
          } = await new Promise((resolve, reject) => {
            Image.getSize(image.url, (w, h) => resolve({
              width: w,
              height: h
            }), reject);
          });
          dimensions[image.url] = {
            width,
            height
          };
        } catch (err) {
          console.log("Failed to get dimensions for", image.url, err);
          dimensions[image.url] = {
            width: SCREEN_WIDTH,
            height: SCREEN_HEIGHT
          };
        }
      }));
      this.setState({
        images,
        index: this.state.index || this.props.index || 0,
        imageDimensions: dimensions,
        isLoadingDimensions: false
      });
    });
    _defineProperty(this, "onChange", index => {
      this.setState({
        index
      });
    });
    _defineProperty(this, "toggleFullscreenVideo", url => {
      if (typeof url !== "string") url = "";
      this.setState({
        showFullscreenVideo: url.length > 0,
        currentVideoUrl: url
      });
    });
    _defineProperty(this, "renderImageFooter", media => {
      var _media$user, _media$user2;
      if (!media.user || !media.date) return null;
      let dateText, timeText;
      if (!_.isNil(media.date)) {
        const imageDate = moment(media.date);
        dateText = imageDate.format("MMMM D, YYYY");
        timeText = imageDate.format("hh:mm A");
      }
      return /*#__PURE__*/React.createElement(View, {
        style: styles.imageInfoContainer
      }, /*#__PURE__*/React.createElement(ProfilePic, {
        Diameter: 36,
        ProfilePic: media === null || media === void 0 || (_media$user = media.user) === null || _media$user === void 0 ? void 0 : _media$user.profilePic
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.imageTextContainer
      }, /*#__PURE__*/React.createElement(Text, {
        style: styles.imageTextName
      }, media === null || media === void 0 || (_media$user2 = media.user) === null || _media$user2 === void 0 ? void 0 : _media$user2.displayName), /*#__PURE__*/React.createElement(Text, {
        numberOfLines: 2,
        style: styles.iamgeTextDate
      }, `Uploaded ${dateText} • ${timeText}`)));
    });
    _defineProperty(this, "renderCaption", media => {
      if (!media.caption) return null;
      return /*#__PURE__*/React.createElement(View, {
        style: styles.captionContainer
      }, /*#__PURE__*/React.createElement(Text, {
        numberOfLines: 3,
        style: styles.captionText
      }, media.caption));
    });
    _defineProperty(this, "getImageDimensions", media => {
      const cachedDimensions = this.state.imageDimensions[media === null || media === void 0 ? void 0 : media.url] || {
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT
      };
      const aspectRatio = cachedDimensions.width / cachedDimensions.height;
      let imageWidth = SCREEN_WIDTH;
      let imageHeight = imageWidth / aspectRatio;

      // Cap at 70% of screen height
      if (imageHeight > MAX_IMAGE_HEIGHT) {
        imageHeight = MAX_IMAGE_HEIGHT;
        imageWidth = imageHeight * aspectRatio;
      }
      return {
        imageWidth,
        imageHeight
      };
    });
    _defineProperty(this, "renderImage", props => {
      const media = this.state.images.find(image => image.url === props.source.uri);
      const isVideoMedia = !_.isNil(media) && media.isVideo;
      const {
        imageWidth,
        imageHeight
      } = this.getImageDimensions(media);
      return /*#__PURE__*/React.createElement(View, {
        style: styles.imageContainer
      }, /*#__PURE__*/React.createElement(Image, {
        source: {
          uri: media === null || media === void 0 ? void 0 : media.url
        },
        style: {
          width: imageWidth,
          height: imageHeight
        },
        resizeMode: "contain"
      }), isVideoMedia && /*#__PURE__*/React.createElement(View, {
        style: [styles.videoOverlay, {
          width: imageWidth,
          height: imageHeight
        }]
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.toggleFullscreenVideo.bind(this, media.original)
      }, /*#__PURE__*/React.createElement(Icon, {
        name: "play",
        type: "font-awesome",
        iconStyle: styles.videoPlayIcon
      }))));
    });
    _defineProperty(this, "renderBottomContent", () => {
      const {
        index,
        images
      } = this.state;
      const media = images[index];
      if (!media) return null;
      const hasCaption = !_.isNil(media.caption);
      const hasUserInfo = !_.isNil(media.user) || !_.isNil(media.date);
      if (!hasCaption && !hasUserInfo) return null;

      // Calculate where the image ends (for caption positioning)
      const {
        imageHeight
      } = this.getImageDimensions(media);
      const imageTop = (SCREEN_HEIGHT - imageHeight) / 2;
      const imageBottom = imageTop + imageHeight;
      const captionTop = imageBottom + 16;
      return /*#__PURE__*/React.createElement(React.Fragment, null, hasCaption && /*#__PURE__*/React.createElement(View, {
        style: [styles.captionWrapper, {
          top: captionTop
        }]
      }, this.renderCaption(media)), hasUserInfo && /*#__PURE__*/React.createElement(View, {
        style: styles.userInfoWrapper
      }, this.renderImageFooter(media)));
    });
    this.state = {
      index: 0,
      images: [],
      showFullscreenVideo: false,
      currentVideoUrl: "",
      imageDimensions: {},
      isLoadingDimensions: false
    };
  }
  componentDidMount() {
    this.setupUrls();
  }
  componentDidUpdate(prevProps) {
    const {
      visible,
      index
    } = this.props;
    if (!prevProps.visible && visible) this.setupUrls();
    if (prevProps.index !== index) this.setState({
      index
    });
  }
  scrollTo(index) {
    this.setState({
      index
    });
  }
  renderClose() {
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.menuIconContainer,
      onPress: this.props.onClose,
      activeOpacity: 0.6
    }, /*#__PURE__*/React.createElement(FontAwesome, {
      name: "x",
      style: [styles.menuIcon]
    }));
  }
  renderVideoPlayerPopup() {
    const {
      showFullscreenVideo,
      currentVideoUrl
    } = this.state;
    if (!currentVideoUrl) return;
    return /*#__PURE__*/React.createElement(VideoPopup, {
      uri: currentVideoUrl,
      visible: showFullscreenVideo,
      onClose: this.toggleFullscreenVideo
    });
  }
  render() {
    var _images$index;
    const {
      visible,
      onClose
    } = this.props;
    const {
      index,
      images,
      isLoadingDimensions
    } = this.state;
    if (_.isEmpty(images)) {
      return null;
    }
    if (isLoadingDimensions) {
      return /*#__PURE__*/React.createElement(Modal, {
        visible: visible,
        animationType: "slide",
        onRequestClose: onClose,
        style: styles.modal
      }, /*#__PURE__*/React.createElement(LoadingIndicator, {
        visible: true
      }));
    }
    const imagesWithSizes = images.map(image => {
      return {
        ...image,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT
      };
    });
    return /*#__PURE__*/React.createElement(Modal, {
      visible: visible,
      animationType: "slide",
      onRequestClose: onClose,
      style: styles.modal
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.container
    }, /*#__PURE__*/React.createElement(ImageViewer, {
      style: styles.imageViewer,
      index: index,
      onChange: this.onChange,
      onSwipeDown: onClose,
      enableSwipeDown: true,
      imageUrls: imagesWithSizes,
      saveToLocalByLongPress: false,
      renderImage: this.renderImage,
      backgroundColor: "#000"
    }), this.renderBottomContent(), this.renderClose(), /*#__PURE__*/React.createElement(SharingTools, {
      uri: (_images$index = images[index]) === null || _images$index === void 0 ? void 0 : _images$index.original
    })), this.renderVideoPlayerPopup());
  }
}
const styles = StyleSheet.create({
  modal: {
    backgroundColor: "#000"
  },
  container: {
    flex: 1,
    backgroundColor: "#000"
  },
  imageViewer: {
    flex: 1,
    backgroundColor: "#000"
  },
  imageContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  captionWrapper: {
    position: "absolute",
    left: 16,
    right: 16,
    zIndex: 10
  },
  userInfoWrapper: {
    position: "absolute",
    bottom: 40,
    // Safe area padding
    left: 16,
    right: 16,
    zIndex: 10
  },
  menuIconContainer: {
    position: "absolute",
    top: StatusBarHeight(0),
    right: 0,
    width: 55,
    height: 55,
    zIndex: 3
  },
  menuIcon: {
    fontSize: 25,
    padding: 15,
    width: 55,
    textAlign: "center",
    color: "#fff",
    zIndex: 3
  },
  videoOverlay: {
    position: "absolute",
    alignItems: "center",
    justifyContent: "center"
  },
  videoPlayIcon: {
    color: "#fff",
    fontSize: 30,
    textShadowColor: "rgba(0,0,0,0.3)",
    textShadowOffset: {
      width: 2,
      height: 2
    }
  },
  imageInfoContainer: {
    flexDirection: "row",
    paddingHorizontal: 12,
    paddingVertical: 12,
    gap: 4,
    borderRadius: 8,
    alignItems: "center"
  },
  imageTextContainer: {
    marginLeft: 12,
    flexDirection: "column",
    gap: 4,
    flex: 1,
    justifyContent: "space-around"
  },
  imageTextName: {
    fontFamily: "sf-semibold",
    fontSize: 14,
    color: "#fff"
  },
  iamgeTextDate: {
    fontFamily: "sf-regular",
    fontSize: 12,
    color: "rgba(255, 255, 255, 0.8)"
  },
  captionContainer: {
    borderRadius: 16,
    padding: 0,
    alignItems: "center",
    justifyContent: "center"
  },
  captionText: {
    fontFamily: "sf-regular",
    fontSize: 15,
    color: "#fff",
    textAlign: "center",
    lineHeight: 20
  }
});
export { ImagePopup };
//# sourceMappingURL=ImagePopup.js.map