"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSvg = require("react-native-svg");
var _styles = require("./styles");
var _useAuth = _interopRequireDefault(require("../../../../core/hooks/useAuth"));
var _feed = require("../../../../core/legacy/feed");
var _dist = _interopRequireDefault(require("../react-native-image-viewing/dist"));
var _store = require("../../../../core/stores/store");
var _xml = require("../../../../core/assets/icons/xml");
var _PollSection = _interopRequireDefault(require("../PollSection/PollSection"));
var _LivestreamContent = _interopRequireDefault(require("../../LivestreamContent"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const MediaSection = ({
  childrenPosts
}) => {
  const {
    apiRegion
  } = (0, _useAuth.default)();
  const [imagePosts, setImagePosts] = (0, _react.useState)([]);
  const [videoPosts, setVideoPosts] = (0, _react.useState)([]);
  const [pollIds, setPollIds] = (0, _react.useState)([]);
  const [livestreamId, setLivestreamId] = (0, _react.useState)([]);
  const [imagePostsFullSize, setImagePostsFullSize] = (0, _react.useState)([]);
  const [videoPostsFullSize, setVideoPostsFullSize] = (0, _react.useState)([]);
  const [visibleFullImage, setIsVisibleFullImage] = (0, _react.useState)(false);
  const [imageIndex, setImageIndex] = (0, _react.useState)(0);
  const styles = (0, _styles.useStyles)();
  let imageStyle = styles.imageLargePost;
  let colStyle = styles.col2;
  const {
    currentPostdetail
  } = (0, _store.useUIKitSelector)(state => state.postDetail);
  const {
    postList: postListGlobal
  } = (0, _store.useUIKitSelector)(state => state.globalFeed);
  const {
    postList
  } = (0, _store.useUIKitSelector)(state => state.feed);
  (0, _react.useEffect)(() => {
    setImagePostsFullSize([]);
    setVideoPostsFullSize([]);
    if (imagePosts.length > 0) {
      const updatedUrls = imagePosts.map(url => {
        return {
          uri: url.replace('size=medium', 'size=large')
        };
      });
      setImagePostsFullSize(updatedUrls);
    }
    if (videoPosts.length > 0) {
      const updatedUrls = videoPosts.map(item => {
        return {
          uri: `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.thumbnailFileId}/download?size=large`
        };
      });
      setVideoPostsFullSize(updatedUrls);
    }
  }, [imagePosts, videoPosts, apiRegion]);
  const getPostInfo = (0, _react.useCallback)(async () => {
    try {
      const response = await Promise.all(childrenPosts.map(async id => {
        const {
          data: post
        } = await (0, _feed.getPostById)(id);
        return {
          dataType: post === null || post === void 0 ? void 0 : post.dataType,
          data: post === null || post === void 0 ? void 0 : post.data
        };
      }));
      response.forEach(item => {
        var _item$data, _item$data2;
        if ((item === null || item === void 0 ? void 0 : item.dataType) === 'image' && item !== null && item !== void 0 && (_item$data = item.data) !== null && _item$data !== void 0 && _item$data.fileId) {
          const url = `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.data.fileId}/download?size=medium`;
          setImagePosts(prev => {
            return !prev.includes(url) ? [...prev, url] : [...prev];
          });
        } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'video' && item !== null && item !== void 0 && (_item$data2 = item.data) !== null && _item$data2 !== void 0 && _item$data2.videoFileId.original) {
          setVideoPosts(prev => {
            const isExisted = prev.some(video => video.videoFileId.original === item.data.videoFileId.original);
            return !isExisted ? [...prev, item.data] : [...prev];
          });
        } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'poll') {
          setPollIds(prev => {
            return !prev.includes(item.data) ? [...prev, item.data] : [...prev];
          });
        } else if ((item === null || item === void 0 ? void 0 : item.dataType) === 'room') {
          setLivestreamId(prev => {
            return !prev.includes(item.data) ? [...prev, item.data.roomId] : [...prev];
          });
        }
      });
    } catch (error) {
      console.log('error: ', error);
    }
  }, [apiRegion, childrenPosts]);
  (0, _react.useEffect)(() => {
    setVideoPosts([]);
    setImagePosts([]);
    getPostInfo();
  }, [childrenPosts, currentPostdetail, postList, postListGlobal, getPostInfo]);
  function onClickImage(index) {
    setIsVisibleFullImage(true);
    setImageIndex(index);
  }
  function renderMediaPosts() {
    const thumbnailFileIds = videoPosts.length > 0 ? videoPosts.map(item => {
      return `https://api.${apiRegion}.amity.co/api/v3/files/${item === null || item === void 0 ? void 0 : item.thumbnailFileId}/download?size=medium`;
    }) : [];
    const mediaPosts = [...imagePosts].length > 0 ? [...imagePosts] : [...thumbnailFileIds];
    const imageElement = mediaPosts.map((item, index) => {
      if (mediaPosts.length === 1) {
        imageStyle = styles.imageLargePost;
        colStyle = styles.col6;
      } else if (mediaPosts.length === 2) {
        colStyle = styles.col3;
        if (index === 0) {
          imageStyle = [styles.imageLargePost, styles.imageMarginRight];
        } else {
          imageStyle = [styles.imageLargePost, styles.imageMarginLeft];
        }
      } else if (mediaPosts.length === 3) {
        switch (index) {
          case 0:
            colStyle = styles.col6;
            imageStyle = [styles.imageMediumPost, styles.imageMarginBottom];
            break;
          case 1:
            colStyle = styles.col3;
            imageStyle = [styles.imageMediumPost, styles.imageMarginTop, styles.imageMarginRight];
            break;
          case 2:
            colStyle = styles.col3;
            imageStyle = [styles.imageMediumPost, styles.imageMarginTop, styles.imageMarginLeft];
            break;
          default:
            break;
        }
      } else {
        switch (index) {
          case 0:
            colStyle = styles.col6;
            imageStyle = [styles.imageMediumLargePost, styles.imageMarginBottom];
            break;
          case 1:
            colStyle = styles.col2;
            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginRight];
            break;
          case 2:
            colStyle = styles.col2;
            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginLeft, styles.imageMarginRight];
            break;
          case 3:
            colStyle = styles.col2;
            imageStyle = [styles.imageSmallPost, styles.imageMarginTop, styles.imageMarginLeft];
            break;
          default:
            break;
        }
      }
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: colStyle,
        key: item
      }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
        onPress: () => onClickImage(index)
      }, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, videoPosts.length > 0 && renderPlayButton(), /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
        style: imageStyle,
        source: {
          uri: item
        }
      }), index === 3 && imagePosts.length > 4 && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.overlay
      }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
        style: styles.overlayText
      }, `+ ${imagePosts.length - 3}`)))));
    });
    if (imageElement.length < 3) {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.imagesWrap
      }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.row
      }, imageElement));
    } else if (imageElement.length === 3) {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: [styles.imagesWrap]
      }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.row
      }, imageElement.slice(0, 1)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.row
      }, imageElement.slice(1, 3)));
    } else {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.imagesWrap
      }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.row
      }, imageElement.slice(0, 1)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: styles.row
      }, imageElement.slice(1, 4)));
    }
  }
  function renderPlayButton() {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.playButton
    }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.SvgXml, {
      xml: _xml.playBtn,
      width: "50",
      height: "50"
    }));
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, pollIds.length > 0 ? /*#__PURE__*/_react.default.createElement(_PollSection.default, {
    pollId: pollIds[0].pollId
  }) : livestreamId.length > 0 ? /*#__PURE__*/_react.default.createElement(_LivestreamContent.default, {
    roomId: livestreamId[0],
    post: null,
    onPressPost: () => {}
  }) : renderMediaPosts(), /*#__PURE__*/_react.default.createElement(_dist.default, {
    images: imagePostsFullSize.length > 0 ? imagePostsFullSize : videoPostsFullSize,
    imageIndex: imageIndex,
    visible: visibleFullImage,
    onRequestClose: () => setIsVisibleFullImage(false),
    isVideoButton: videoPosts.length > 0 ? true : false,
    videoPosts: videoPosts
    // eslint-disable-next-line react/no-unstable-nested-components
    ,
    HeaderComponent: ({
      imageIndex: imgIndex
    }) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.headerContainer
    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.flexWidth
    }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
      style: styles.closebtnIcon,
      onPress: () => setIsVisibleFullImage(false)
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: styles.closeBtn
    }, "X"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.flexWidth
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: styles.header
    }, imgIndex + 1, "/", imagePostsFullSize.length || videoPostsFullSize.length)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.flexWidth
    }))
  }));
};
var _default = exports.default = /*#__PURE__*/_react.default.memo(MediaSection);
//# sourceMappingURL=index.js.map