import { Image, Text, TouchableOpacity, View } from 'react-native';
import { useEffect, useState } from 'react';
import { SvgXml } from 'react-native-svg';
import { errorIcon, officialIcon, privateIcon, storyRing } from '../../../core/assets/icons/xml';
import { ComponentID, ElementID, ImageSizeState, PageID } from '../../enums';
import { useFile, useStoryPermission } from '../../hooks';
import useConfig from '../../hooks/useConfig';
import { useStyles } from './styles';
import { CommunityRepository } from '@amityco/ts-sdk-react-native';
import { useTheme } from 'react-native-paper';
import { defaultCommunityAvatarUri } from '../../../core/assets';
const StoryCircleItem = ({
  onPressStoryView,
  storyTarget
}) => {
  var _getUiKitConfig;
  const theme = useTheme();
  const [avatarUrl, setAvatarUrl] = useState(null);
  const [communityData, setCommunityData] = useState(null);
  const [communityLoading, setCommunityLoading] = useState(true);
  const {
    hasStoryPermission
  } = useStoryPermission(storyTarget.targetId);
  const {
    getImage
  } = useFile();
  const {
    getUiKitConfig
  } = useConfig();
  const styles = useStyles();
  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'] : ['#e2e2e2', '#e2e2e2'];
  useEffect(() => {
    if (storyTarget.targetType !== 'community') return null;
    const unsubscribe = CommunityRepository.getCommunity(storyTarget.targetId, async ({
      error,
      loading,
      data
    }) => {
      if (error) {
        setCommunityLoading(false);
        return;
      }
      if (!loading) {
        setCommunityData(data);
        setCommunityLoading(false);
        const avatarImage = await getImage({
          fileId: data.avatarFileId,
          imageSize: ImageSizeState.small,
          type: 'community'
        });
        setAvatarUrl(avatarImage);
      }
    });
    return () => unsubscribe();
  }, [getImage, storyTarget.targetId, storyTarget.targetType]);
  if (storyTarget.targetType !== 'community') return null;

  // Global story feed: only show stories from communities the user has joined.
  // Public community stories are visible on the community profile page,
  // but must NOT appear in the global story feed for non-members.
  // Private community stories are never returned by the SDK for non-members,
  // but we guard here as an extra safety net.
  if (!communityLoading && !(communityData !== null && communityData !== void 0 && communityData.isJoined)) return null;
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    key: storyTarget.targetId,
    style: styles.avatarContainer,
    onPress: () => onPressStoryView(storyTarget)
  }, /*#__PURE__*/React.createElement(Image, {
    source: avatarUrl ? {
      uri: avatarUrl
    } : {
      uri: defaultCommunityAvatarUri
    },
    style: styles.communityAvatar
  }), /*#__PURE__*/React.createElement(SvgXml, {
    style: styles.storyRing,
    width: 64,
    height: 64,
    xml: storyRing(storyRingColor[0], storyRingColor[1])
  }), hasStoryPermission && (storyTarget === null || storyTarget === void 0 ? void 0 : storyTarget.failedStoriesCount) > 0 ? /*#__PURE__*/React.createElement(View, {
    style: styles.errorIcon
  }, /*#__PURE__*/React.createElement(SvgXml, {
    width: 16,
    height: 16,
    xml: errorIcon()
  })) : communityData !== null && communityData !== void 0 && communityData.isOfficial ? /*#__PURE__*/React.createElement(SvgXml, {
    style: styles.officialIcon,
    xml: officialIcon(theme.colors.primary)
  }) : null, /*#__PURE__*/React.createElement(View, {
    style: styles.textRow
  }, !(communityData !== null && communityData !== void 0 && communityData.isPublic) && /*#__PURE__*/React.createElement(SvgXml, {
    width: 17,
    height: 17,
    xml: privateIcon(theme.colors.base)
  }), /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 1,
    ellipsizeMode: "tail",
    style: styles.itemText
  }, communityData === null || communityData === void 0 ? void 0 : communityData.displayName)));
};
export default StoryCircleItem;
//# sourceMappingURL=StoryCircleItem.js.map