import { useState, useEffect } from 'react';
import { View, Image, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { usePrevious } from './helpers/StateHelpers';
import { useTheme } from 'react-native-paper';
import { SvgXml } from 'react-native-svg';
import { communityIcon, officialIcon, privateIcon, storyCircleCreatePlusIcon, storyRing } from '../../../../core/assets/icons/xml';
import useConfig from '../../../hooks/useConfig';
import { useStoryPermission } from '../../../hooks/useStoryPermission';
const StoryCircleListItem = ({
  item,
  handleStoryItemPress,
  isCommunityStory = false
}) => {
  var _getUiKitConfig, _item$stories, _item$stories2;
  const theme = useTheme();
  const styles = useStyles();
  const [, setIsPressed] = useState(item === null || item === void 0 ? void 0 : item.seen);
  const prevSeen = usePrevious(item === null || item === void 0 ? void 0 : item.seen);
  const {
    hasStoryPermission
  } = useStoryPermission(item.user_id);
  const {
    getUiKitConfig
  } = useConfig();
  const storyRingColor = item !== null && item !== void 0 && item.seen ? ['#e2e2e2', '#e2e2e2'] : ((_getUiKitConfig = getUiKitConfig({
    page: 'story_page',
    component: 'story_tab_component',
    element: 'story_ring'
  })) === null || _getUiKitConfig === void 0 ? void 0 : _getUiKitConfig.progress_color) ?? ['#e2e2e2', '#e2e2e2'];
  useEffect(() => {
    if (prevSeen !== (item === null || item === void 0 ? void 0 : item.seen)) {
      setIsPressed(item === null || item === void 0 ? void 0 : item.seen);
    }
  }, [item === null || item === void 0 ? void 0 : item.seen]);
  const _handleItemPress = pressedItem => {
    if (handleStoryItemPress) handleStoryItemPress(pressedItem);
    setIsPressed(true);
  };
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => _handleItemPress(item),
    style: styles.itemContainer
  }, /*#__PURE__*/React.createElement(View, null, item.user_image ? /*#__PURE__*/React.createElement(Image, {
    source: {
      uri: item.user_image
    },
    style: isCommunityStory ? styles.communityAvatar : styles.avatar
  }) : /*#__PURE__*/React.createElement(SvgXml, {
    style: isCommunityStory ? styles.communityAvatar : styles.avatar,
    width: isCommunityStory ? 40 : 56,
    height: isCommunityStory ? 40 : 56,
    xml: communityIcon
  }), /*#__PURE__*/React.createElement(SvgXml, {
    style: styles.storyRing,
    width: isCommunityStory ? 48 : 64,
    height: isCommunityStory ? 48 : 64,
    xml: storyRing((item === null || item === void 0 || (_item$stories = item.stories) === null || _item$stories === void 0 ? void 0 : _item$stories.length) > 0 ? storyRingColor[0] : '#EBECEF', (item === null || item === void 0 || (_item$stories2 = item.stories) === null || _item$stories2 === void 0 ? void 0 : _item$stories2.length) > 0 ? storyRingColor.length > 1 ? storyRingColor[1] : storyRingColor[0] : '#EBECEF')
  }), item.isOfficial && !isCommunityStory && /*#__PURE__*/React.createElement(SvgXml, {
    style: styles.officialIcon,
    xml: officialIcon(theme.colors.primary)
  }), isCommunityStory && hasStoryPermission && /*#__PURE__*/React.createElement(SvgXml, {
    style: styles.storyCreateIcon,
    xml: storyCircleCreatePlusIcon()
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.textRow
  }, !item.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
  }, isCommunityStory ? 'Story' : item.user_name))));
};
export default StoryCircleListItem;
export const useStyles = () => {
  const theme = useTheme();
  const styles = StyleSheet.create({
    title: {
      fontSize: 17,
      fontWeight: '600',
      margin: 1,
      color: theme.colors.base
    },
    scrollView: {
      justifyContent: 'space-between'
    },
    itemContainer: {
      alignItems: 'center',
      width: 68,
      margin: 8
    },
    avatar: {
      width: 56,
      height: 56,
      borderRadius: 56,
      margin: 4
    },
    communityAvatar: {
      width: 40,
      height: 40,
      borderRadius: 56,
      margin: 4
    },
    itemText: {
      fontSize: 13,
      fontWeight: '400',
      color: theme.colors.base
    },
    textRow: {
      marginTop: 6,
      flexDirection: 'row',
      alignItems: 'center'
    },
    titleContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between'
    },
    arrowIcon: {
      marginRight: 16,
      display: 'flex'
    },
    seeAllBtn: {
      marginRight: 16
    },
    seeAllIcon: {
      width: 40,
      height: 40,
      borderRadius: 25,
      backgroundColor: '#ededed',
      alignItems: 'center',
      justifyContent: 'center'
    },
    seeAllText: {
      fontSize: 13,
      marginTop: 6
    },
    storyRing: {
      position: 'absolute'
    },
    officialIcon: {
      position: 'absolute',
      left: 45,
      top: 42
    },
    storyCreateIcon: {
      position: 'absolute',
      left: 32,
      top: 32
    }
  });
  return styles;
};
//# sourceMappingURL=StoryCircleListItem.js.map