"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useStyles = exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _StateHelpers = require("./helpers/StateHelpers");
var _reactNativePaper = require("react-native-paper");
var _reactNativeSvg = require("react-native-svg");
var _xml = require("../../../../../core/assets/icons/xml");
var _useConfig = _interopRequireDefault(require("../../../../../core/hooks/useConfig"));
var _customization = require("../../../../../core/enums/customization");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StoryCircleListItem = ({
  item,
  handleStoryItemPress,
  isCommunityStory = false
}) => {
  var _item$stories, _item$stories2;
  const theme = (0, _reactNativePaper.useTheme)();
  const styles = useStyles();
  const [, setIsPressed] = (0, _react.useState)(item === null || item === void 0 ? void 0 : item.seen);
  const prevSeen = (0, _StateHelpers.usePrevious)(item === null || item === void 0 ? void 0 : item.seen);
  const {
    getConfig
  } = (0, _useConfig.default)();
  const [storyRingColor, setStoryRingColor] = (0, _react.useState)([]);
  (0, _react.useLayoutEffect)(() => {
    const colorRings = getConfig(_customization.ElementID.StoryRingOnStoryTab).progress_color;
    setStoryRingColor(colorRings);
  }, []);
  (0, _react.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 = storyItem => {
    if (handleStoryItemPress) handleStoryItemPress(storyItem);
    setIsPressed(true);
  };
  return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => _handleItemPress(item),
    style: styles.itemContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, null, item.user_image ? /*#__PURE__*/React.createElement(_reactNative.Image, {
    source: {
      uri: item.user_image
    },
    style: isCommunityStory ? styles.communityAvatar : styles.avatar
  }) : /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    style: isCommunityStory ? styles.communityAvatar : styles.avatar,
    width: isCommunityStory ? 40 : 56,
    height: isCommunityStory ? 40 : 56,
    xml: _xml.communityIcon
  }), /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    style: styles.storyRing,
    width: isCommunityStory ? 48 : 64,
    height: isCommunityStory ? 48 : 64,
    xml: (0, _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(_reactNativeSvg.SvgXml, {
    style: styles.officialIcon,
    xml: (0, _xml.officialIcon)(theme.colors.primary)
  })), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.textRow
  }, !item.isPublic && /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    width: 17,
    height: 17,
    xml: (0, _xml.privateIcon)(theme.colors.base)
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    numberOfLines: 1,
    ellipsizeMode: "tail",
    style: styles.itemText
  }, isCommunityStory ? 'Story' : item.user_name))));
};
var _default = exports.default = StoryCircleListItem; // const styles2 = StyleSheet.create({
//   container: {
//     marginVertical: 5,
//     marginRight: 10,
//   },
//   avatarWrapper: {
//     borderWidth: 2,
//     justifyContent: 'center',
//     alignItems: 'center',
//     alignSelf: 'center',
//     borderRadius: 100,
//     height: 64,
//     width: 64,
//   },
//   text: {
//     marginTop: 3,
//     textAlign: 'center',
//     alignItems: 'center',
//     fontSize: 11,
//   },
// });
const useStyles = () => {
  const theme = (0, _reactNativePaper.useTheme)();
  const styles = _reactNative.StyleSheet.create({
    title: {
      fontSize: 17,
      fontWeight: '600',
      margin: 1,
      color: theme.colors.base
    },
    scrollView: {
      justifyContent: 'space-between'
    },
    itemContainer: {
      alignItems: 'center',
      width: 68
    },
    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
    }
  });
  return styles;
};
exports.useStyles = useStyles;
//# sourceMappingURL=StoryCircleListItem.js.map