"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageReaction = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _native = _interopRequireDefault(require("styled-components/native"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */

const ReactionContainer = _native.default.View`
  flex-direction: row;
  align-items: center;
  gap: 8px;
`;
const ReactionBox = (0, _native.default)(_reactNative.TouchableOpacity)`
  padding: 4px 8px;
  border-radius: 20px;
  background-color: ${({
  active,
  color
}) => active ? color : '#ffffff'};
  flex-direction: row;
  align-items: center;
  justify-content: center;
  elevation: 3;
`;
const emojiMap = {
  joy: '😂',
  heart: '❤️',
  fire: '🔥',
  '+1': '👍',
  smile: '😄',
  scream: '😱'
};
const MessageReaction = ({
  reaction,
  color,
  changeReaction,
  userName
}) => {
  const [tooltipEmoji, setTooltipEmoji] = (0, _react.useState)(null);
  const fadeAnim = new _reactNative.Animated.Value(0);
  const showTooltip = emoji => {
    setTooltipEmoji(emoji);
    _reactNative.Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true
    }).start();
  };
  const hideTooltip = () => {
    _reactNative.Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true
    }).start(() => setTooltipEmoji(null));
  };
  if (!reaction) {
    return null;
  }
  const reactionDetails = (0, _react.useMemo)(() => {
    const result = {};
    Object.values(reaction).forEach(({
      emoji,
      data
    }) => {
      if (emoji && emoji.length > 0) {
        emoji.forEach(em => {
          if (!result[em]) {
            result[em] = {
              count: 0,
              users: []
            };
          }
          result[em].count += 1;
          result[em].users.push(`${data?.senderFirstName} ${data?.senderLastName}`);
        });
      }
    });
    return result;
  }, [reaction]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactionContainer, {
    children: Object.entries(reactionDetails).map(([emoji, details]) => {
      const isUserReacted = userName ? details.users.includes(userName) : false;
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: {
          position: 'relative'
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ReactionBox, {
          active: isUserReacted,
          color: color,
          onPress: () => changeReaction(emoji),
          onLongPress: () => showTooltip(emoji),
          onPressOut: hideTooltip,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: {
              fontSize: 18,
              marginRight: 4
            },
            children: emojiMap[emoji] || emoji
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: {
              fontSize: 14,
              fontWeight: '600',
              color: isUserReacted ? '#fff' : color
            },
            children: details.count
          })]
        }), tooltipEmoji === emoji && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
          style: {
            position: 'absolute',
            bottom: 36,
            left: '50%',
            transform: [{
              translateX: -50
            }, {
              translateY: fadeAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [4, 0]
              })
            }],
            opacity: fadeAnim,
            backgroundColor: '#333',
            borderRadius: 6,
            paddingHorizontal: 10,
            paddingVertical: 6,
            maxWidth: 220,
            zIndex: 999
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: {
              color: '#fff',
              fontSize: 12
            },
            children: details.users.join(', ')
          })
        })]
      }, emoji);
    })
  });
};
exports.MessageReaction = MessageReaction;
//# sourceMappingURL=MessageReaction.js.map