"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
var _react = require("react");
var _hooks = require("../../../../hooks");
var _styles = require("../styles");
var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
var _xml = require("../../../../../core/assets/icons/xml");
var _icons = require("../../../../../core/assets/icons");
var _reactNativeSvg = require("react-native-svg");
var _reactNativeModalbox = _interopRequireDefault(require("react-native-modalbox"));
var _enums = require("../../../../enums");
var _useConfig = _interopRequireDefault(require("../../../../hooks/useConfig"));
var _bottomSheet = _interopRequireDefault(require("@devvie/bottom-sheet"));
var _CommentList = _interopRequireDefault(require("../../../../components/Social/CommentList/CommentList"));
var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
var _useTimeDifference = require("../../../../../core/hooks/useTimeDifference");
var _constants = require("../../../../../core/constants");
var _reactNativeSwipeGestures = _interopRequireDefault(require("react-native-swipe-gestures"));
var _uiSlice = _interopRequireDefault(require("../../../../../core/stores/slices/uiSlice"));
var _LoadingOverlay = require("../../../../components/legacy/LoadingOverlay");
var _Toast = _interopRequireDefault(require("../../../../components/legacy/Toast/Toast"));
var _Typography = require("../../../../../core/components/Typography/Typography");
var _reactNativePaper = require("react-native-paper");
var _store = require("../../../../../core/stores/store");
var _toast = require("../../../../../core/assets/icons/toast");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AmityViewStoryItem = ({
  communityAvatar,
  communityData,
  storyData,
  hasStoryImpressionPermission,
  close,
  onClose,
  setCurrent,
  current,
  hasStoryPermission,
  onPressAvatar,
  onPressCommunityName,
  onNavigateToUser
}) => {
  var _currentStory$items$, _getUiKitConfig, _getUiKitConfig2, _getUiKitConfig3, _getUiKitConfig4, _currentStory$imageDa, _currentStory$videoDa, _currentStory$imageDa2, _currentStory$data, _currentStory$data2, _currentStory$data3, _currentStory$videoDa2, _currentStory$data4, _currentStory$data5, _currentStory$data6, _currentStory$data7;
  const styles = (0, _styles.useStyles)();
  const theme = (0, _reactNativePaper.useTheme)();
  const {
    getUiKitConfig
  } = (0, _useConfig.default)();
  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const sheetRef = (0, _react.useRef)(null);
  const {
    handleReaction
  } = (0, _hooks.useStory)();
  const currentStory = storyData[current];
  const storyHyperLink = (currentStory === null || currentStory === void 0 || (_currentStory$items$ = currentStory.items[0]) === null || _currentStory$items$ === void 0 ? void 0 : _currentStory$items$.data) || undefined;
  const timeDifference = (0, _useTimeDifference.useTimeDifference)(currentStory === null || currentStory === void 0 ? void 0 : currentStory.createdAt, true);
  const reachCount = (currentStory === null || currentStory === void 0 ? void 0 : currentStory.reach) ?? 0;
  const reactionsCounts = (currentStory === null || currentStory === void 0 ? void 0 : currentStory.reactionsCount) ?? 0;
  const commentsCounts = (currentStory === null || currentStory === void 0 ? void 0 : currentStory.commentsCount) ?? 0;
  const myReactions = currentStory === null || currentStory === void 0 ? void 0 : currentStory.myReactions;
  const [pressed, setPressed] = (0, _react.useState)(false);
  const [muted, setMuted] = (0, _react.useState)(false);
  const [storyDuration, setStoryDuration] = (0, _react.useState)(_constants.STORY_DEFAULT_DURATION);
  const [currentSeek, setCurrentSeek] = (0, _react.useState)(0);
  const [totalReaction, setTotalReaction] = (0, _react.useState)(reactionsCounts);
  const [isLiked, setIsLiked] = (0, _react.useState)((myReactions === null || myReactions === void 0 ? void 0 : myReactions.length) > 0);
  const [openCommentSheet, setOpenCommentSheet] = (0, _react.useState)(false);
  const [load, setLoad] = (0, _react.useState)(true);
  const [loading, setLoading] = (0, _react.useState)(false);
  const dispatch = (0, _store.useUIKitDispatch)();
  const {
    showToastMessage
  } = _uiSlice.default.actions;
  const storyViewerBgColor = ((_getUiKitConfig = getUiKitConfig({
    page: _enums.PageID.StoryPage,
    component: _enums.ComponentID.WildCardComponent,
    element: _enums.ElementID.StoryImpressionBtn
  })) === null || _getUiKitConfig === void 0 ? void 0 : _getUiKitConfig.background_color) ?? '#2b2b2b';
  const storyCommentBgColor = ((_getUiKitConfig2 = getUiKitConfig({
    page: _enums.PageID.StoryPage,
    component: _enums.ComponentID.WildCardComponent,
    element: _enums.ElementID.StoryCommentBtn
  })) === null || _getUiKitConfig2 === void 0 ? void 0 : _getUiKitConfig2.background_color) ?? '#2b2b2b';
  const storyReactionBgColor = ((_getUiKitConfig3 = getUiKitConfig({
    element: _enums.ElementID.StoryRing,
    component: _enums.ComponentID.WildCardComponent,
    page: _enums.PageID.StoryPage
  })) === null || _getUiKitConfig3 === void 0 ? void 0 : _getUiKitConfig3.background_color) ?? '#2b2b2b';
  const storyPlusBgColor = ((_getUiKitConfig4 = getUiKitConfig({
    page: _enums.PageID.StoryPage,
    component: _enums.ComponentID.WildCardComponent,
    element: _enums.ElementID.StoryHyperLinkBtn
  })) === null || _getUiKitConfig4 === void 0 ? void 0 : _getUiKitConfig4.background_color) ?? '#ffffff';
  const muteIcon = (0, _hooks.useConfigImageUri)({
    configPath: {
      page: _enums.PageID.StoryPage,
      component: _enums.ComponentID.WildCardComponent,
      element: _enums.ElementID.SpeakerBtn
    },
    configKey: 'mute_icon'
  });
  const unmuteIcon = (0, _hooks.useConfigImageUri)({
    configPath: {
      page: _enums.PageID.StoryPage,
      component: _enums.ComponentID.WildCardComponent,
      element: _enums.ElementID.SpeakerBtn
    },
    configKey: 'unmute_icon'
  });
  const handleLoadVideo = data => {
    setStoryDuration(data.duration * 1000);
  };
  const next = (0, _react.useCallback)(() => {
    setCurrentSeek(0);
    setLoad(true);
    if (current !== storyData.length - 1) {
      let data = [...storyData];
      data[current].finish = 1;
      setCurrent(current + 1);
      progress.setValue(0);
    } else {
      close('next');
    }
  }, [close, current, progress, setCurrent, setLoad, storyData]);
  const startAnimation = (0, _react.useCallback)(() => {
    _reactNative.Animated.timing(progress, {
      toValue: 1,
      duration: storyDuration - currentSeek * 1000,
      useNativeDriver: false
    }).start(({
      finished
    }) => {
      if (finished) {
        next();
      }
    });
  }, [currentSeek, next, progress, storyDuration]);
  const start = (0, _react.useCallback)(() => {
    setLoad(false);
    startAnimation();
  }, [setLoad, startAnimation]);
  const previous = (0, _react.useCallback)(() => {
    setCurrentSeek(0);
    setLoad(true);
    if (current - 1 >= 0) {
      let data = [...storyData];
      data[current].finish = 0;
      setCurrent(current - 1);
      progress.setValue(0);
    } else {
      close('previous');
    }
  }, [close, current, progress, setCurrent, storyData]);
  const onPressComment = (0, _react.useCallback)(() => {
    progress.stopAnimation(() => setPressed(true));
    return setOpenCommentSheet(true);
  }, [progress]);
  const onPressReaction = (0, _react.useCallback)(() => {
    if (communityData !== null && communityData !== void 0 && communityData.isJoined) {
      handleReaction({
        targetId: currentStory === null || currentStory === void 0 ? void 0 : currentStory.storyId,
        reactionName: 'like',
        isLiked
      });
      setTotalReaction(prev => isLiked ? prev - 1 : prev + 1);
      setIsLiked(prev => !prev);
      return;
    }
    progress.stopAnimation(() => setPressed(true));
    _reactNative.Alert.alert('Join community to interact with all stories', null, [{
      text: 'OK',
      onPress: () => {
        startAnimation();
        setPressed(false);
      }
    }]);
  }, [communityData === null || communityData === void 0 ? void 0 : communityData.isJoined, currentStory === null || currentStory === void 0 ? void 0 : currentStory.storyId, handleReaction, isLiked, progress, startAnimation]);
  const onCloseBottomSheet = (0, _react.useCallback)(() => {
    startAnimation();
    setPressed(false);
  }, [startAnimation]);
  const onClosedCommentSheet = (0, _react.useCallback)(() => {
    setOpenCommentSheet(false);
    startAnimation();
    setPressed(false);
  }, [startAnimation]);
  const onNavigateFromComment = (0, _react.useCallback)(userId => {
    onClosedCommentSheet();
    onNavigateToUser && onNavigateToUser(userId);
  }, [onClosedCommentSheet, onNavigateToUser]);
  const deleteStory = (0, _react.useCallback)(async () => {
    setLoading(true);
    try {
      current > 0 && previous();
      const deleted = await _tsSdkReactNative.StoryRepository.softDeleteStory(currentStory === null || currentStory === void 0 ? void 0 : currentStory.storyId);
      if (deleted) {
        current === 0 && previous();
        dispatch(showToastMessage({
          toastMessage: 'Story deleted',
          isSuccessToast: true
        }));
      }
    } catch (err) {
      dispatch(showToastMessage({
        toastMessage: 'Failed to delete story. Please try again.',
        isSuccessToast: false
      }));
    } finally {
      var _sheetRef$current;
      setLoading(false);
      sheetRef === null || sheetRef === void 0 || (_sheetRef$current = sheetRef.current) === null || _sheetRef$current === void 0 || _sheetRef$current.close();
    }
  }, [current, currentStory === null || currentStory === void 0 ? void 0 : currentStory.storyId, dispatch, previous, showToastMessage]);
  const onPressDelete = (0, _react.useCallback)(() => {
    _reactNative.Alert.alert('Delete this story?', "This story will be permanently deleted. You'll no longer to see and find this story", [{
      text: 'Cancel',
      onPress: () => {
        var _sheetRef$current2;
        return sheetRef === null || sheetRef === void 0 || (_sheetRef$current2 = sheetRef.current) === null || _sheetRef$current2 === void 0 ? void 0 : _sheetRef$current2.close();
      }
    }, {
      text: 'Delete',
      style: 'destructive',
      onPress: deleteStory
    }]);
  }, [deleteStory]);
  const onPressHyperLink = (0, _react.useCallback)(async () => {
    var _storyHyperLink$url;
    currentStory === null || currentStory === void 0 || currentStory.analytics.markLinkAsClicked();
    const hyperlinkUrl = storyHyperLink !== null && storyHyperLink !== void 0 && (_storyHyperLink$url = storyHyperLink.url) !== null && _storyHyperLink$url !== void 0 && _storyHyperLink$url.includes('http') ? storyHyperLink === null || storyHyperLink === void 0 ? void 0 : storyHyperLink.url : `https://${storyHyperLink === null || storyHyperLink === void 0 ? void 0 : storyHyperLink.url}`;
    await _reactNative.Linking.openURL('https://google.com');
    const supported = await _reactNative.Linking.canOpenURL(hyperlinkUrl);
    if (supported) {
      await _reactNative.Linking.openURL(hyperlinkUrl);
    } else {
      _reactNative.Alert.alert(`Cannot open : ${hyperlinkUrl}`);
    }
  }, [currentStory === null || currentStory === void 0 ? void 0 : currentStory.analytics, storyHyperLink === null || storyHyperLink === void 0 ? void 0 : storyHyperLink.url]);
  const onPressMenu = (0, _react.useCallback)(() => {
    var _sheetRef$current3;
    progress.stopAnimation(() => setPressed(true));
    (_sheetRef$current3 = sheetRef.current) === null || _sheetRef$current3 === void 0 || _sheetRef$current3.open();
  }, [progress]);
  const onPressMenuButtonFailed = (0, _react.useCallback)(() => {
    progress.stopAnimation(() => setPressed(true));
    _reactNative.Alert.alert('Failed to upload story', 'Would you like to discard uploading?', [{
      text: 'Cancel',
      onPress: () => {
        var _sheetRef$current4;
        return sheetRef === null || sheetRef === void 0 || (_sheetRef$current4 = sheetRef.current) === null || _sheetRef$current4 === void 0 ? void 0 : _sheetRef$current4.close();
      }
    }, {
      text: 'Delete',
      style: 'destructive',
      onPress: deleteStory
    }]);
  }, [deleteStory, progress]);
  const isFailedImageUpload = (currentStory === null || currentStory === void 0 ? void 0 : currentStory.dataType) === 'image' && ((currentStory === null || currentStory === void 0 ? void 0 : currentStory.syncState) === 'error' || (currentStory === null || currentStory === void 0 ? void 0 : currentStory.syncState) === 'syncing' || !(currentStory !== null && currentStory !== void 0 && (_currentStory$imageDa = currentStory.imageData) !== null && _currentStory$imageDa !== void 0 && _currentStory$imageDa.fileUrl));
  const isFailedVideoUpload = (currentStory === null || currentStory === void 0 ? void 0 : currentStory.dataType) === 'video' && ((currentStory === null || currentStory === void 0 ? void 0 : currentStory.syncState) === 'error' || (currentStory === null || currentStory === void 0 ? void 0 : currentStory.syncState) === 'syncing' || !(currentStory !== null && currentStory !== void 0 && (_currentStory$videoDa = currentStory.videoData) !== null && _currentStory$videoDa !== void 0 && _currentStory$videoDa.fileUrl));
  const imageUri = (currentStory === null || currentStory === void 0 || (_currentStory$imageDa2 = currentStory.imageData) === null || _currentStory$imageDa2 === void 0 ? void 0 : _currentStory$imageDa2.fileUrl) || (typeof (currentStory === null || currentStory === void 0 || (_currentStory$data = currentStory.data) === null || _currentStory$data === void 0 ? void 0 : _currentStory$data.fileData) === 'string' ? currentStory === null || currentStory === void 0 || (_currentStory$data2 = currentStory.data) === null || _currentStory$data2 === void 0 ? void 0 : _currentStory$data2.fileData : '');
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.container]
  }, (currentStory === null || currentStory === void 0 ? void 0 : currentStory.dataType) === 'image' && (currentStory === null || currentStory === void 0 || (_currentStory$data3 = currentStory.data) === null || _currentStory$data3 === void 0 ? void 0 : _currentStory$data3.imageDisplayMode) !== 'fill' && /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: {
      uri: imageUri
    },
    style: styles.blurredBackground,
    resizeMode: "cover",
    blurRadius: 20
  }), /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, null, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.backgroundContainer
  }, (currentStory === null || currentStory === void 0 ? void 0 : currentStory.dataType) === 'video' ? /*#__PURE__*/React.createElement(_reactNativeVideo.default, {
    onLoadStart: () => setLoad(true),
    onProgress: ({
      currentTime
    }) => setCurrentSeek(currentTime),
    source: {
      uri: (currentStory === null || currentStory === void 0 || (_currentStory$videoDa2 = currentStory.videoData) === null || _currentStory$videoDa2 === void 0 ? void 0 : _currentStory$videoDa2.fileUrl) || (typeof (currentStory === null || currentStory === void 0 || (_currentStory$data4 = currentStory.data) === null || _currentStory$data4 === void 0 ? void 0 : _currentStory$data4.fileData) === 'string' ? currentStory === null || currentStory === void 0 || (_currentStory$data5 = currentStory.data) === null || _currentStory$data5 === void 0 ? void 0 : _currentStory$data5.fileData : '')
    },
    style: styles.video,
    resizeMode: "contain",
    controls: false,
    onReadyForDisplay: () => start(),
    paused: pressed,
    onLoad: handleLoadVideo,
    muted: muted
  }) : (currentStory === null || currentStory === void 0 ? void 0 : currentStory.dataType) === 'image' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.Image, {
    onLoadStart: () => setLoad(true),
    onLoadEnd: () => start(),
    source: {
      uri: imageUri
    },
    style: [styles.image,
    // eslint-disable-next-line react-native/no-inline-styles
    isFailedImageUpload && {
      opacity: 0.6
    }],
    resizeMode: (currentStory === null || currentStory === void 0 || (_currentStory$data6 = currentStory.data) === null || _currentStory$data6 === void 0 ? void 0 : _currentStory$data6.imageDisplayMode) === 'fill' ? 'cover' : 'contain'
  }), (currentStory === null || currentStory === void 0 || (_currentStory$data7 = currentStory.data) === null || _currentStory$data7 === void 0 ? void 0 : _currentStory$data7.imageDisplayMode) === 'fill' && /*#__PURE__*/React.createElement(_reactNativeLinearGradient.default, {
    colors: ['rgba(0, 0, 0, 0.4)', 'transparent', 'rgba(0, 0, 0, 0.4)'],
    start: {
      x: 0,
      y: 0
    },
    end: {
      x: 0,
      y: 1
    },
    style: styles.storyGradient
  })) : null, load && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.spinnerContainer
  }, /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
    size: "large",
    color: 'white'
  })))), /*#__PURE__*/React.createElement(_reactNativeSwipeGestures.default, {
    onSwipeUp: onPressComment,
    style: styles.flexCol
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.animationBarContainer]
  }, storyData.map((story, index) => {
    return /*#__PURE__*/React.createElement(_reactNative.View, {
      key: story.storyId,
      style: [styles.animationBackground]
    }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
      style: [
      // eslint-disable-next-line react-native/no-inline-styles
      {
        flex: current === index ? progress : storyData[index].finish,
        height: 2,
        backgroundColor: 'white'
      }]
    }));
  })), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.userContainer]
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flexRowCenter
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => {
      onPressAvatar && onPressAvatar();
    },
    hitSlop: 10
  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
    style: [styles.avatarImage],
    source: {
      uri: communityAvatar
    }
  }), hasStoryPermission && /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    height: 12,
    width: 12,
    style: styles.storyCreateIcon,
    xml: (0, _xml.storyCircleCreatePlusIcon)(storyPlusBgColor)
  })), /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.Text, {
    onPress: () => onPressCommunityName && onPressCommunityName(),
    style: styles.avatarText
  }, communityData === null || communityData === void 0 ? void 0 : communityData.displayName), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flexRowCenter
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: [styles.avatarSubText,
    // eslint-disable-next-line react-native/no-inline-styles
    {
      marginLeft: 10
    }]
  }, timeDifference, " .", ' '), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.avatarSubText
  }, "By ", currentStory === null || currentStory === void 0 ? void 0 : currentStory.creator.displayName)))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.closeIconContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.menuCloseContaier
  }, hasStoryPermission && /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    hitSlop: 5,
    style: styles.threeDotsMenu,
    onPress: onPressMenu
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyThreedotsMenu)(),
    width: "25",
    height: "25"
  })), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    hitSlop: 5,
    onPress: () => onClose()
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _icons.close)(),
    width: "28",
    height: "28",
    color: "white"
  }))))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.pressContainer
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableWithoutFeedback, {
    onPressIn: () => progress.stopAnimation(),
    onLongPress: () => setPressed(true),
    delayLongPress: 300,
    onPressOut: () => {
      setPressed(false);
      startAnimation();
    },
    onPress: () => {
      if (!pressed) {
        previous();
      }
    }
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flex
  })), /*#__PURE__*/React.createElement(_reactNative.TouchableWithoutFeedback, {
    onPressIn: () => progress.stopAnimation(),
    onLongPress: () => setPressed(true),
    delayLongPress: 300,
    onPressOut: () => {
      setPressed(false);
      startAnimation();
    },
    onPress: () => {
      if (!pressed) {
        next();
      }
    }
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.flex
  }))), storyHyperLink && /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.hyperlinkContainer,
    onPress: onPressHyperLink
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyHyperLinkIcon)(theme.colors.primary),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(_Typography.Typography.Body, {
    style: styles.hyperlinkText
  }, storyHyperLink.customText || storyHyperLink.url)), (currentStory === null || currentStory === void 0 ? void 0 : currentStory.dataType) === 'video' && /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.muteBtn,
    onPress: () => setMuted(prev => !prev)
  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: muted ? muteIcon : unmuteIcon,
    style: styles.muteIcon
  }))), (isFailedImageUpload || isFailedVideoUpload) && hasStoryPermission ? /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.errorContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.errorContainerLeft
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _toast.informative)('white'),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(_Typography.Typography.Body, {
    style: styles.errorText
  }, "Failed to upload story")), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    hitSlop: 5,
    style: styles.threeDotsMenu,
    onPress: onPressMenuButtonFailed
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyThreedotsMenu)(),
    width: "20",
    height: "20"
  }))) : /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.footer
  }, hasStoryImpressionPermission ? /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: [styles.seenContainer, {
      backgroundColor: storyViewerBgColor
    }]
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.seenIcon)(),
    width: "25",
    height: "25"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.seen
  }, reachCount)) : /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.seenContainer
  }), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.seenContainer
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: [styles.iconContainer, {
      backgroundColor: storyCommentBgColor
    }],
    onPress: onPressComment
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyCommentIcon)(),
    width: "25",
    height: "25"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.seen
  }, commentsCounts)), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: [styles.iconContainer, {
      backgroundColor: storyReactionBgColor
    }],
    onPress: onPressReaction
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: isLiked ? _xml.storyLikedIcon : _xml.storyLikeIcon,
    width: "25",
    height: "25"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.seen
  }, totalReaction)))), openCommentSheet && /*#__PURE__*/React.createElement(_reactNativeModalbox.default, {
    style: styles.bottomSheet,
    isOpen: openCommentSheet,
    onClosed: onClosedCommentSheet,
    position: "bottom",
    swipeToClose: true,
    swipeArea: 250,
    backButtonClose: true,
    coverScreen: true
  }, /*#__PURE__*/React.createElement(_reactNative.KeyboardAvoidingView, {
    behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
    style: styles.commentBottomSheet
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.handleBar
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.commentTitle
  }, "Comments"), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.horizontalSperator
  }), /*#__PURE__*/React.createElement(_CommentList.default, {
    postId: currentStory === null || currentStory === void 0 ? void 0 : currentStory.storyId,
    postType: "story",
    disabledComment: !(communityData !== null && communityData !== void 0 && communityData.allowCommentInStory),
    disabledInteraction: !(communityData !== null && communityData !== void 0 && communityData.isJoined),
    onNavigate: onNavigateFromComment,
    withAvatar: true
  }))), /*#__PURE__*/React.createElement(_bottomSheet.default, {
    ref: sheetRef,
    onClose: onCloseBottomSheet,
    closeOnDragDown: true,
    height: 120,
    style: styles.deleteBottomSheet
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.deleteBottomSheet
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.deleteBtn,
    onPress: onPressDelete
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _icons.trash)(),
    width: 24,
    height: 24
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.deleteStoryTxt
  }, "Delete story")))), /*#__PURE__*/React.createElement(_LoadingOverlay.LoadingOverlay, {
    isLoading: loading
  }), /*#__PURE__*/React.createElement(_Toast.default, null));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(AmityViewStoryItem);
//# sourceMappingURL=AmityViewStoryItem.js.map