var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageUserReactions = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _useFetchReactions2 = require("./hooks/useFetchReactions");
var _ReactionButton = require("./ReactionButton");
var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
var _jsxRuntime = require("react/jsx-runtime");
var _this = this,
  _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageMenu/MessageUserReactions.tsx";
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var sort = {
  created_at: -1
};
var renderSelectorItem = function renderSelectorItem(_ref) {
  var index = _ref.index,
    item = _ref.item;
  return (0, _jsxRuntime.jsx)(_ReactionButton.ReactionButton, {
    Icon: item.Icon,
    onPress: item.onSelectReaction,
    selected: item.selectedReaction === item.type,
    type: item.type
  }, "".concat(item.type, "_").concat(index));
};
var MessageUserReactions = exports.MessageUserReactions = function MessageUserReactions(props) {
  var _message$reaction_gro;
  var message = props.message,
    propMessageUserReactionsAvatar = props.MessageUserReactionsAvatar,
    propMessageUserReactionsItem = props.MessageUserReactionsItem,
    propReactions = props.reactions,
    propSelectedReaction = props.selectedReaction,
    propSupportedReactions = props.supportedReactions;
  var reactionTypes = Object.keys((_message$reaction_gro = message == null ? void 0 : message.reaction_groups) != null ? _message$reaction_gro : {});
  var _React$useState = _react["default"].useState(propSelectedReaction != null ? propSelectedReaction : reactionTypes[0]),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    selectedReaction = _React$useState2[0],
    setSelectedReaction = _React$useState2[1];
  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
    contextMessageUserReactionsAvatar = _useMessagesContext.MessageUserReactionsAvatar,
    contextMessageUserReactionsItem = _useMessagesContext.MessageUserReactionsItem,
    contextSupportedReactions = _useMessagesContext.supportedReactions;
  var supportedReactions = propSupportedReactions != null ? propSupportedReactions : contextSupportedReactions;
  var MessageUserReactionsAvatar = propMessageUserReactionsAvatar != null ? propMessageUserReactionsAvatar : contextMessageUserReactionsAvatar;
  var MessageUserReactionsItem = propMessageUserReactionsItem != null ? propMessageUserReactionsItem : contextMessageUserReactionsItem;
  var onSelectReaction = function onSelectReaction(reactionType) {
    setSelectedReaction(reactionType);
  };
  (0, _react.useEffect)(function () {
    if (selectedReaction && reactionTypes.length > 0 && !reactionTypes.includes(selectedReaction)) {
      setSelectedReaction(reactionTypes[0]);
    }
  }, [reactionTypes, selectedReaction]);
  var messageReactions = (0, _react.useMemo)(function () {
    return reactionTypes.reduce(function (acc, reaction) {
      var reactionData = supportedReactions == null ? void 0 : supportedReactions.find(function (supportedReaction) {
        return supportedReaction.type === reaction;
      });
      if (reactionData) {
        acc.push(reactionData);
      }
      return acc;
    }, []);
  }, [reactionTypes, supportedReactions]);
  var _useFetchReactions = (0, _useFetchReactions2.useFetchReactions)({
      message: message,
      reactionType: selectedReaction,
      sort: sort
    }),
    loading = _useFetchReactions.loading,
    loadNextPage = _useFetchReactions.loadNextPage,
    fetchedReactions = _useFetchReactions.reactions;
  var _useTheme = (0, _ThemeContext.useTheme)(),
    _useTheme$theme$messa = _useTheme.theme.messageMenu.userReactions,
    container = _useTheme$theme$messa.container,
    contentContainer = _useTheme$theme$messa.contentContainer,
    flatlistColumnContainer = _useTheme$theme$messa.flatlistColumnContainer,
    flatlistContainer = _useTheme$theme$messa.flatlistContainer,
    reactionSelectorContainer = _useTheme$theme$messa.reactionSelectorContainer,
    reactionsText = _useTheme$theme$messa.reactionsText;
  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
    t = _useTranslationContex.t;
  var reactions = (0, _react.useMemo)(function () {
    return propReactions || fetchedReactions.map(function (reaction) {
      var _reaction$user, _reaction$user2, _reaction$user3;
      return {
        id: (_reaction$user = reaction.user) == null ? void 0 : _reaction$user.id,
        image: (_reaction$user2 = reaction.user) == null ? void 0 : _reaction$user2.image,
        name: (_reaction$user3 = reaction.user) == null ? void 0 : _reaction$user3.name,
        type: reaction.type
      };
    });
  }, [propReactions, fetchedReactions]);
  var renderItem = function renderItem(_ref2) {
    var item = _ref2.item;
    return (0, _jsxRuntime.jsx)(MessageUserReactionsItem, {
      MessageUserReactionsAvatar: MessageUserReactionsAvatar,
      reaction: item,
      supportedReactions: supportedReactions != null ? supportedReactions : []
    });
  };
  var renderHeader = function renderHeader() {
    return (0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.reactionsText, reactionsText],
      children: t('Message Reactions')
    });
  };
  var selectorReactions = messageReactions.map(function (reaction) {
    return Object.assign({}, reaction, {
      onSelectReaction: onSelectReaction,
      selectedReaction: selectedReaction
    });
  });
  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
    accessibilityLabel: "User Reactions on long press message",
    style: [styles.container, container],
    children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.reactionSelectorContainer, reactionSelectorContainer],
      children: (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
        contentContainerStyle: [styles.contentContainer, contentContainer],
        data: selectorReactions,
        horizontal: true,
        keyExtractor: function keyExtractor(item) {
          return item.type;
        },
        renderItem: renderSelectorItem
      })
    }), !loading ? (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
      accessibilityLabel: "reaction-flat-list",
      columnWrapperStyle: [styles.flatListColumnContainer, flatlistColumnContainer],
      contentContainerStyle: [styles.flatListContainer, flatlistContainer],
      data: reactions,
      keyExtractor: function keyExtractor(item) {
        return item.id;
      },
      ListHeaderComponent: renderHeader,
      numColumns: 4,
      onEndReached: loadNextPage,
      renderItem: renderItem
    }) : null]
  });
};
var styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1
  },
  contentContainer: {
    flexGrow: 1,
    justifyContent: 'space-around',
    marginVertical: 16
  },
  flatListColumnContainer: {
    justifyContent: 'space-evenly'
  },
  flatListContainer: {
    justifyContent: 'center'
  },
  reactionSelectorContainer: {
    flexDirection: 'row',
    justifyContent: 'space-evenly'
  },
  reactionsText: {
    fontSize: 16,
    fontWeight: 'bold',
    marginVertical: 16,
    textAlign: 'center'
  }
});
//# sourceMappingURL=MessageUserReactions.js.map