"use strict";

/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
import React, { useMemo, useState } from 'react';
import { View, Text, TouchableOpacity, Animated } from 'react-native';
import styled from 'styled-components/native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ReactionContainer = styled.View`
  flex-direction: row;
  align-items: center;
  gap: 8px;
`;
const ReactionBox = styled(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: '😱'
};
export const MessageReaction = ({
  reaction,
  color,
  changeReaction,
  userName
}) => {
  const [tooltipEmoji, setTooltipEmoji] = useState(null);
  const fadeAnim = new Animated.Value(0);
  const showTooltip = emoji => {
    setTooltipEmoji(emoji);
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true
    }).start();
  };
  const hideTooltip = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true
    }).start(() => setTooltipEmoji(null));
  };
  if (!reaction) {
    return null;
  }
  const reactionDetails = 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__*/_jsx(ReactionContainer, {
    children: Object.entries(reactionDetails).map(([emoji, details]) => {
      const isUserReacted = userName ? details.users.includes(userName) : false;
      return /*#__PURE__*/_jsxs(View, {
        style: {
          position: 'relative'
        },
        children: [/*#__PURE__*/_jsxs(ReactionBox, {
          active: isUserReacted,
          color: color,
          onPress: () => changeReaction(emoji),
          onLongPress: () => showTooltip(emoji),
          onPressOut: hideTooltip,
          children: [/*#__PURE__*/_jsx(Text, {
            style: {
              fontSize: 18,
              marginRight: 4
            },
            children: emojiMap[emoji] || emoji
          }), /*#__PURE__*/_jsx(Text, {
            style: {
              fontSize: 14,
              fontWeight: '600',
              color: isUserReacted ? '#fff' : color
            },
            children: details.count
          })]
        }), tooltipEmoji === emoji && /*#__PURE__*/_jsx(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__*/_jsx(Text, {
            style: {
              color: '#fff',
              fontSize: 12
            },
            children: details.users.join(', ')
          })
        })]
      }, emoji);
    })
  });
};
//# sourceMappingURL=MessageReaction.js.map