import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { Image, TouchableOpacity, View } from 'react-native';
import { useStyles } from './styles';
import { useStory } from '../../hooks/useStory';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import { SvgXml } from 'react-native-svg';
import { errorIcon, storyCircleCreatePlusIcon, storyRing } from '../../../core/assets/icons/xml';
import { useFile } from '../../hooks/useFile';
import { ImageSizeState } from '../../enums/imageSizeState';
import { useStoryPermission } from '../../hooks/useStoryPermission';
import useConfig from '../../hooks/useConfig';
import { ComponentID, ElementID, PageID } from '../../enums';
import Modal from 'react-native-modalbox';
import AmityViewStoryPage from '../../features/story/View/View';
import { Typography } from '../../../core/components/Typography/Typography';
const CommunityStories = ({
  communityId,
  community
}) => {
  var _getUiKitConfig;
  const navigation = useNavigation();
  const styles = useStyles();
  const {
    getUiKitConfig
  } = useConfig();
  const {
    hasStoryPermission
  } = useStoryPermission(communityId);
  const {
    getStoryTarget,
    storyTarget,
    stories,
    getStories
  } = useStory();
  const {
    getImage
  } = useFile();
  const [avatarUrl, setAvatarUrl] = useState(undefined);
  const [viewStory, setViewStory] = useState(false);
  const shouldRestoreStory = useRef(false);
  const storyRingColor = hasStoryPermission && (storyTarget === null || storyTarget === void 0 ? void 0 : storyTarget.failedStoriesCount) > 0 ? ['#DE1029', '#DE1029'] : storyTarget !== null && storyTarget !== void 0 && storyTarget.hasUnseen ? ((_getUiKitConfig = getUiKitConfig({
    page: PageID.StoryPage,
    component: ComponentID.StoryTab,
    element: ElementID.StoryRing
  })) === null || _getUiKitConfig === void 0 ? void 0 : _getUiKitConfig.progress_color) ?? ['#e2e2e2', '#e2e2e2'] : stories.length > 0 ? ['#e2e2e2', '#ffffff'] : ['#ffffff', '#ffffff'];
  useEffect(() => {
    (async () => {
      const avatarImage = await getImage({
        fileId: community === null || community === void 0 ? void 0 : community.avatarFileId,
        imageSize: ImageSizeState.small,
        type: 'community'
      });
      setAvatarUrl(avatarImage);
    })();
  }, [community === null || community === void 0 ? void 0 : community.avatarFileId, getImage]);
  useFocusEffect(useCallback(() => {
    if (shouldRestoreStory.current) {
      shouldRestoreStory.current = false;
      setViewStory(true);
      return;
    }
    getStoryTarget({
      targetId: communityId,
      targetType: 'community'
    });
    getStories({
      targetId: communityId,
      targetType: 'community'
    });
  }, [communityId, getStoryTarget, getStories]));
  const onPressCreateStory = useCallback(() => {
    hasStoryPermission && navigation.navigate('CreateStory', {
      targetId: communityId,
      targetType: 'community'
    });
  }, [communityId, hasStoryPermission, navigation]);
  const onPressStoryView = useCallback(() => {
    setViewStory(true);
  }, []);
  const onPressAvatar = useCallback(() => {
    setViewStory(false);
    onPressCreateStory();
  }, [onPressCreateStory]);
  const onPressCommunityName = useCallback(() => {
    setViewStory(false);
    navigation.navigate('CommunityProfilePage', {
      communityId: communityId
    });
  }, [communityId, navigation]);
  const renderCommunityStory = () => {
    if (community !== null && community !== void 0 && community.isJoined) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: styles.avatarContainer,
        onPress: storyTarget !== null && storyTarget !== void 0 && storyTarget.hasUnseen || stories.length > 0 ? onPressStoryView : onPressCreateStory
      }, /*#__PURE__*/React.createElement(Image, {
        source: avatarUrl ? {
          uri: avatarUrl
        } : require('../../../core/assets/images/communityAvatar.png'),
        style: styles.communityAvatar
      }), /*#__PURE__*/React.createElement(SvgXml, {
        style: styles.storyRing,
        width: 48,
        height: 48,
        xml: storyRing(storyRingColor[0], storyRingColor[1])
      }), hasStoryPermission ? (storyTarget === null || storyTarget === void 0 ? void 0 : storyTarget.failedStoriesCount) > 0 ? /*#__PURE__*/React.createElement(SvgXml, {
        style: styles.errorIcon,
        xml: errorIcon()
      }) : /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: () => onPressCreateStory()
      }, /*#__PURE__*/React.createElement(SvgXml, {
        style: styles.storyCreateIcon,
        xml: storyCircleCreatePlusIcon()
      })) : null), /*#__PURE__*/React.createElement(Typography.Caption, {
        style: styles.base
      }, "Story"));
    }
    if (community !== null && community !== void 0 && community.isPublic && !(community !== null && community !== void 0 && community.isJoined) && stories.length > 0) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: styles.avatarContainer,
        onPress: onPressStoryView
      }, /*#__PURE__*/React.createElement(Image, {
        source: avatarUrl ? {
          uri: avatarUrl
        } : require('../../../core/assets/images/communityAvatar.png'),
        style: styles.communityAvatar
      }), /*#__PURE__*/React.createElement(SvgXml, {
        style: styles.storyRing,
        width: 48,
        height: 48,
        xml: storyRing(storyRingColor[0], storyRingColor[1])
      })), /*#__PURE__*/React.createElement(Typography.Caption, {
        style: styles.base
      }, "Story"));
    }
    return null;
  };
  const handleNavigateToUser = useCallback(userId => {
    shouldRestoreStory.current = true;
    setViewStory(false);
    navigation.navigate('UserProfile', {
      userId
    });
  }, [navigation]);
  const onFinish = useCallback(() => {
    setViewStory(false);
    getStoryTarget({
      targetId: communityId,
      targetType: 'community'
    });
  }, [communityId, getStoryTarget]);
  if (community !== null && community !== void 0 && community.isPublic && !(community !== null && community !== void 0 && community.isJoined) && stories.length <= 0) {
    return null;
  }
  if (!hasStoryPermission && stories.length === 0) return null;
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.storyItemWrap
  }, renderCommunityStory()), /*#__PURE__*/React.createElement(Modal, {
    style: styles.modal,
    isOpen: viewStory,
    onClosed: () => setViewStory(false),
    position: "center",
    swipeToClose: true,
    swipeArea: 250,
    backButtonClose: true,
    coverScreen: true
  }, /*#__PURE__*/React.createElement(AmityViewStoryPage, {
    targetId: communityId,
    targetType: "community",
    onFinish: onFinish,
    onPressAvatar: onPressAvatar,
    onPressCommunityName: onPressCommunityName,
    onNavigateToUser: handleNavigateToUser
  })));
};
export default /*#__PURE__*/memo(CommunityStories);
//# sourceMappingURL=index.js.map