"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = require("react");
var _reactNativeLinearGradient = _interopRequireDefault(require("react-native-linear-gradient"));
var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
var _xml = require("../../../../core/assets/icons/xml");
var _reactNativeSvg = require("react-native-svg");
var _styles = require("./styles");
var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
var _enums = require("../../../enums");
var _reactNativePaper = require("react-native-paper");
var _useConfigImageUri = require("../../../hooks/useConfigImageUri");
var _HyperLinkConfig = _interopRequireDefault(require("./components/HyperLinkConfig"));
var _useFile = require("../../../hooks/useFile");
var _url = require("../../../../core/utils/url");
var _LoadingOverlay = require("../../../components/legacy/LoadingOverlay");
var _mime = _interopRequireDefault(require("mime"));
var _toastSlice = require("../../../../core/stores/slices/toastSlice");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AmityDraftStoryPage = ({
  targetId,
  targetType,
  mediaType,
  onCreateStory,
  onDiscardStory
}) => {
  var _hyperlink$, _hyperlink$2, _hyperlink$3, _hyperlink$4;
  const type = (0, _url.getMediaTypeFromUrl)(mediaType.uri);
  const styles = (0, _styles.useStyles)();
  const {
    getImage
  } = (0, _useFile.useFile)();
  const [imageDisplayMode, setImageDisplayMode] = (0, _react.useState)('fit');
  const [isVisibleModal, setIsVisibleModal] = (0, _react.useState)(false);
  const [communityAvatarUrl, setCommunityAvatarUrl] = (0, _react.useState)(null);
  const [hyperlink, setHyperlink] = (0, _react.useState)(undefined);
  const [loading, setLoading] = (0, _react.useState)(false);
  const theme = (0, _reactNativePaper.useTheme)();
  const aspectRatioIcon = (0, _useConfigImageUri.useConfigImageUri)({
    configPath: {
      page: _enums.PageID.CreateStoryPage,
      component: _enums.ComponentID.WildCardComponent,
      element: _enums.ElementID.AspectRatioBtn
    },
    configKey: 'aspect_ratio_icon'
  });
  const hyperLinkIcon = (0, _useConfigImageUri.useConfigImageUri)({
    configPath: {
      page: _enums.PageID.CreateStoryPage,
      component: _enums.ComponentID.WildCardComponent,
      element: _enums.ElementID.StoryHyperLinkBtn
    },
    configKey: 'hyperlink_button_icon'
  });
  const {
    showToast
  } = (0, _toastSlice.useToast)();
  (0, _react.useEffect)(() => {
    if (!targetId || targetType !== 'community') return setCommunityAvatarUrl(null);
    _tsSdkReactNative.CommunityRepository.getCommunity(targetId, async ({
      error,
      loading: isLoading,
      data
    }) => {
      if (error) return;
      if (!isLoading) {
        const image = await getImage({
          fileId: data.avatarFileId,
          imageSize: _enums.ImageSizeState.small,
          type: 'community'
        });
        setCommunityAvatarUrl(image ?? null);
      }
    })();
  }, [getImage, targetId, targetType]);
  const onPressBack = (0, _react.useCallback)(() => {
    _reactNative.Alert.alert('Discard this story?', 'The story will be permanently deleted. It cannot be undone.', [{
      text: 'Cancel',
      style: 'cancel'
    }, {
      text: 'Discard',
      style: 'destructive',
      onPress: () => {
        onDiscardStory();
      }
    }]);
  }, [onDiscardStory]);
  const onPressAspectRatio = (0, _react.useCallback)(() => {
    setImageDisplayMode(prev => prev === 'fit' ? 'fill' : 'fit');
  }, []);
  const onPressHyperLink = (0, _react.useCallback)(() => {
    setIsVisibleModal(true);
  }, []);
  const onPressShareStory = (0, _react.useCallback)(async () => {
    const formData = new FormData();
    const isImage = type === _enums.StoryType.image;
    const mimeType = _mime.default.getType(mediaType.uri) ?? (isImage ? 'image/jpeg' : 'video/mp4');
    formData.append('files', {
      uri: mediaType.uri,
      name: mediaType.name,
      type: mimeType
    });
    try {
      setLoading(true);
      if (type === _enums.StoryType.image) {
        await _tsSdkReactNative.StoryRepository.createImageStory('community', targetId, formData, {}, imageDisplayMode, hyperlink);
      } else {
        await _tsSdkReactNative.StoryRepository.createVideoStory('community', targetId, formData, {}, hyperlink);
      }
      showToast({
        message: 'Successfully shared story.',
        type: 'success'
      });
    } catch (error) {
      showToast({
        message: 'Failed to share story. Please try again.',
        type: 'informative'
      });
    } finally {
      setLoading(false);
      onCreateStory();
    }
  }, [hyperlink, imageDisplayMode, mediaType, onCreateStory, showToast, targetId, type]);
  const onHyperLinkSubmit = (0, _react.useCallback)(item => {
    if (!item) {
      setHyperlink(undefined);
      setIsVisibleModal(false);
      return;
    }
    const storyItem = {
      data: item,
      type: 'hyperlink'
    };
    setHyperlink([storyItem]);
    setIsVisibleModal(false);
  }, []);
  return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.imageContainer
  }, type === _enums.StoryType.image ? /*#__PURE__*/React.createElement(React.Fragment, null, imageDisplayMode !== 'fill' && /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: {
      uri: mediaType.uri
    },
    style: styles.blurredBackground,
    resizeMode: "cover",
    blurRadius: 20
  }), /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: {
      uri: mediaType.uri
    },
    style: styles.image,
    resizeMode: imageDisplayMode === 'fill' ? 'cover' : 'contain'
  })) : /*#__PURE__*/React.createElement(_reactNativeVideo.default, {
    paused: loading,
    repeat: true,
    source: {
      uri: mediaType.uri
    },
    style: styles.image,
    resizeMode: imageDisplayMode === 'fill' ? 'cover' : 'contain'
  }), 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
  })), (hyperlink === null || hyperlink === void 0 ? void 0 : hyperlink.length) > 0 && /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.hyperlinkContainer,
    onPress: onPressHyperLink
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyHyperLinkIcon)('blue'),
    width: "25",
    height: "25"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.hyperlinkText
  }, (((_hyperlink$ = hyperlink[0]) === null || _hyperlink$ === void 0 || (_hyperlink$ = _hyperlink$.data) === null || _hyperlink$ === void 0 || (_hyperlink$ = _hyperlink$.customText) === null || _hyperlink$ === void 0 ? void 0 : _hyperlink$.length) ?? 0) === 0 ? (_hyperlink$2 = hyperlink[0]) === null || _hyperlink$2 === void 0 || (_hyperlink$2 = _hyperlink$2.data) === null || _hyperlink$2 === void 0 ? void 0 : _hyperlink$2.url : (_hyperlink$3 = hyperlink[0]) === null || _hyperlink$3 === void 0 || (_hyperlink$3 = _hyperlink$3.data) === null || _hyperlink$3 === void 0 ? void 0 : _hyperlink$3.customText)), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.shareStoryBtn,
    onPress: onPressShareStory
  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: communityAvatarUrl ? {
      uri: communityAvatarUrl
    } : require('../../../../core/assets/images/communityAvatar.png'),
    style: styles.avatar
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.shareStoryTxt
  }, "Share story"), /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.rightLongArrow)(theme.colors.baseShade2),
    width: 16,
    height: 16
  })), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.backBtn,
    onPress: onPressBack
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.leftLongArrow)('white'),
    width: 32,
    height: 32
  })), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.aspectRatioBtn,
    onPress: onPressAspectRatio
  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: aspectRatioIcon,
    style: styles.aspectRationIcon
  })), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    style: styles.hyperLinkBtn,
    onPress: onPressHyperLink
  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: hyperLinkIcon,
    style: styles.hyperLinkIcon
  })), /*#__PURE__*/React.createElement(_HyperLinkConfig.default, {
    isVisibleModal: isVisibleModal,
    setIsVisibleModal: setIsVisibleModal,
    onHyperLinkSubmit: onHyperLinkSubmit,
    hyperlinkItem: hyperlink === null || hyperlink === void 0 || (_hyperlink$4 = hyperlink[0]) === null || _hyperlink$4 === void 0 ? void 0 : _hyperlink$4.data
  }), /*#__PURE__*/React.createElement(_LoadingOverlay.LoadingOverlay, {
    isLoading: loading
  }));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(AmityDraftStoryPage);
//# sourceMappingURL=Draft.js.map