"use strict";

import React, { useRef, useState } from 'react';
import { View, Pressable, StyleSheet, findNodeHandle, UIManager, Dimensions, Text } from 'react-native';
import { useDispatch } from 'react-redux';
import { Avatar } from './Avatar';
import MessageInteractions from './MessageInteractions';
import { BottomReplyContainer } from './BottomReplyContainer';
import { MessageReply } from './MessageReply';
import { DeletedMessage } from './DeletedMessage';
import { setActiveModal, setDeleteModal, setSelectedUser } from '../../roomStore/chatSettingsSlice';
import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
import { setActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
import styled from 'styled-components/native';
import MediaMessage from '../MainComponents/MediaMessage';
import MessageTranslations from './MessageTranslations';
import { useChatSettingState } from '../../hooks/useChatSettingState';
import { parseMessageBody } from '../../helpers/parseMessageBody';
import { useMessageHeapState } from '../../hooks/useMessageHeapState';
import { DoubleTick } from '../../assets/icons';
import { useXmppClient } from '../../context/xmppProvider';
import { MessageReaction } from './MessageReaction';
import { MessageFooter } from '../styled/StyledComponents';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const CustomMessageContainer = styled.View`
  flex-direction: row;
  padding: 10px;
  align-items: flex-end;
  justify-content: ${({
  isUser
}) => isUser ? 'flex-end' : 'flex-start'};
  margin-bottom: ${props => props.reply ? '20px' : '0px'};
`;
const CustomMessageBubble = styled.View`
  position: relative;
  max-width: 85%;
  min-width: 30%;
  padding: 10px;
  margin-right: ${({
  isUser
}) => isUser ? '0' : '10px'};
  margin-left: ${({
  isUser
}) => isUser ? '10px' : '0'};
  border-radius: 10px;
  border-bottom-left-radius: ${({
  isUser
}) => isUser ? '10' : '0'}px;
  border-bottom-right-radius: ${({
  isUser
}) => isUser ? '0' : '10'}px;
  background-color: ${({
  isUser,
  deleted,
  backgroundMessageUser,
  backgroundMessage
}) => deleted ? '#f5f5f5' : isUser ? backgroundMessageUser || '#d1e7ff' : backgroundMessage || '#fff'};
`;
const CustomMessageText = styled.Text`
  font-size: 16px;
  color: ${({
  color,
  colorUser,
  isUser
}) => isUser ? colorUser || '#333' : color || '#333'};
`;
const CustomMessagePhoto = styled.Image`
  width: 40px;
  height: 40px;
  border-radius: 20px;
`;
const CustomMessagePhotoContainer = styled.TouchableOpacity`
  margin-right: 10px;
`;
const CustomUserName = styled.Text`
  font-size: 14px;
  font-weight: 500;
  color: ${({
  color
}) => color || '#333'};
`;
const CustomMessageTimestamp = styled.Text`
  font-size: 12px;
  color: #999;
  color: ${({
  isUser,
  color,
  colorUser
}) => isUser ? colorUser || '#999' : color || '#999'};
  margin-top: 5px;
  align-self: flex-end;
`;
const Message = ({
  message,
  isUser,
  isReply
}) => {
  const dispatch = useDispatch();
  const {
    client
  } = useXmppClient();
  const {
    config,
    langSource,
    user
  } = useChatSettingState();
  const {
    idSet
  } = useMessageHeapState();
  const [isPressed, setIsPressed] = useState(false);
  if (__DEV__ && message.id && !globalThis.__loggedMsg?.[message.id]) {
    (globalThis.__loggedMsg ||= {})[message.id] = true;
  }
  const [contextMenuPosition, setContextMenuPosition] = useState(null);
  const timerRef = useRef(null);
  const messageRef = useRef(null);
  const handleUserAvatarClick = user => {
    dispatch(setActiveModal(MODAL_TYPES.PROFILE));
    dispatch(setSelectedUser(user));
  };
  const handleReplyMessage = () => {
    dispatch(setEditAction({
      isEdit: false
    }));
    if (!isReply && message.mainMessage) {
      const messageCore = JSON.parse(message.mainMessage);
      dispatch(setActiveMessage({
        id: messageCore.id,
        chatJID: messageCore.roomJid
      }));
      return setIsPressed(false);
    }
    dispatch(setActiveMessage({
      id: message.id,
      chatJID: message.roomJid
    }));
    return setIsPressed(false);
  };
  const handleDeleteMessage = () => {
    dispatch(setDeleteModal({
      isDeleteModal: true,
      roomJid: message.roomJid,
      messageId: message.id
    }));
    setIsPressed(false);
  };
  const handleEditMessage = () => {
    dispatch(setEditAction({
      isEdit: true,
      roomJid: message.roomJid,
      messageId: message.id,
      text: message.body
    }));
    return setIsPressed(false);
  };

  // const handleLongPress = () => {
  //   setIsPressed(true);
  //   console.log("setIsPressed", isPressed);
  // };

  const handleReactionMessage = emoji => {
    if (!message.reaction) {
      return client?.sendMessageReactionStanza(message.id, message.roomJid, [emoji], `${user.firstName} ${user.lastName}`);
    }
    if (message.reaction && message.reaction[user.xmppUsername || ''] && message.reaction[user.xmppUsername || '']?.emoji.includes(emoji)) {
      const filterEmoji = message.reaction[user.xmppUsername || '']?.emoji.filter(reaction => reaction !== emoji);
      return client?.sendMessageReactionStanza(message.id, message.roomJid, filterEmoji, `${user.firstName} ${user.lastName}`);
    }
    client?.sendMessageReactionStanza(message.id, message.roomJid, [...(message.reaction[user.xmppUsername || '']?.emoji || []), emoji], `${user.firstName} ${user.lastName}`);
  };
  const handleLongPress = () => {
    if (messageRef.current) {
      const nodeHandle = findNodeHandle(messageRef.current);
      if (nodeHandle) {
        UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
          const screenHeight = Dimensions.get('window').height;
          const enoughSpaceBelow = screenHeight - pageY - height > 150;
          setContextMenuPosition({
            x: pageX,
            y: enoughSpaceBelow ? pageY + height : pageY - 150
          });
        });
      }
    }
    setIsPressed(true);
  };
  const messageText = config?.messageTextFilter?.enabled ? parseMessageBody(config?.messageTextFilter.filterFunction(message.body)) : parseMessageBody(message.body);
  const isPending = idSet.has(message.id) || message?.pending || false;
  return /*#__PURE__*/_jsxs(View, {
    children: [isPressed && /*#__PURE__*/_jsx(View, {
      style: styles.overlay
    }), /*#__PURE__*/_jsxs(View, {
      ref: messageRef,
      style: [styles.customMessageContainer, {
        justifyContent: isUser ? 'flex-end' : 'flex-start',
        marginBottom: !!message?.reply?.length || message?.reaction && !!Object.keys(message?.reaction)?.length ? 20 : 0
      }, isPressed ? {
        transform: [{
          scale: 1.05
        }],
        paddingRight: 16
      } : undefined
      // justify-content: ${({ isUser }) => (isUser ? "flex-end" : "flex-start")},
      // margin-bottom: ${(props) => !!props.reply && "20px"},
      ],
      children: [!isUser && /*#__PURE__*/_jsx(CustomMessagePhotoContainer, {
        onPress: () => handleUserAvatarClick(message.user),
        children: message.user?.profileImage ? /*#__PURE__*/_jsx(CustomMessagePhoto, {
          source: {
            uri: message.user.profileImage
          }
        }) : /*#__PURE__*/_jsx(Avatar, {
          username: message.user.name
        })
      }), /*#__PURE__*/_jsx(Pressable
      // disableInteractions hides the long-press → context menu
      // (delete / edit / reply / react). Mirrors web's config gate.
      , {
        onLongPress: config?.disableInteractions ? undefined : handleLongPress,
        delayLongPress: 500,
        children: /*#__PURE__*/_jsxs(CustomMessageBubble, {
          isUser: isUser,
          deleted: message.isDeleted,
          backgroundMessageUser: config?.messageColor?.backgroundMessageUser,
          backgroundMessage: config?.messageColor?.backgroundMessage,
          children: [!isUser && /*#__PURE__*/_jsx(CustomUserName, {
            color: config?.colors?.primary,
            children: message.user.name
          }), !isReply && message.mainMessage && /*#__PURE__*/_jsx(MessageReply, {
            handleReplyMessage: handleReplyMessage,
            isUser: isUser,
            text: JSON.parse(message.mainMessage).text,
            color: config?.colors?.primary
          }), message?.isMediafile === 'true' && !message?.isDeleted ? /*#__PURE__*/_jsx(MediaMessage, {
            mimeType: message.mimetype,
            messageText: message.locationPreview,
            location: message?.location,
            message: message
          }) : /*#__PURE__*/_jsx(_Fragment, {
            children: message.isDeleted && message.id !== 'delimiter-new' ? /*#__PURE__*/_jsx(DeletedMessage, {}) : /*#__PURE__*/_jsx(CustomMessageText, {
              isUser: isUser,
              colorUser: config?.messageColor?.colorUser,
              color: config?.messageColor?.color,
              children: /*#__PURE__*/_jsx(Text, {
                children: messageText
              })
            })
          }), config?.enableTranslates && /*#__PURE__*/_jsx(MessageTranslations, {
            message: message,
            config: config,
            langSource: langSource
          }), /*#__PURE__*/_jsxs(CustomMessageTimestamp, {
            children: [!config?.disableSentLogic && isUser && isPending && /*#__PURE__*/_jsx(Text, {
              children: "sending..."
            }), new Date(message.date).toLocaleTimeString([], {
              hour: '2-digit',
              minute: '2-digit'
            }), !config?.disableSentLogic && isUser && !isPending && /*#__PURE__*/_jsx(DoubleTick, {})]
          }), message?.reply?.length && message?.reply?.length > 0 ? /*#__PURE__*/_jsx(BottomReplyContainer, {
            isUser: isUser,
            onClick: handleReplyMessage,
            reply: message?.reply
          }) : /*#__PURE__*/_jsx(View, {}), /*#__PURE__*/_jsx(MessageFooter, {
            isUser: isUser,
            children: message.reaction && !config?.disableReactions && /*#__PURE__*/_jsx(MessageReaction, {
              reaction: message.reaction,
              changeReaction: handleReactionMessage,
              color: config?.colors?.primary || '#0052CD',
              userName: `${user.firstName} ${user.lastName}`
            })
          })]
        })
      })]
    }), !config?.disableInteractions && isPressed && /*#__PURE__*/_jsx(MessageInteractions, {
      position: contextMenuPosition,
      isReply: isReply,
      isUser: isUser,
      message: message,
      closeMenu: () => setIsPressed(false),
      handleReplyMessage: handleReplyMessage,
      handleDeleteMessage: handleDeleteMessage,
      handleEditMessage: handleEditMessage,
      handleReactionMessage: handleReactionMessage
    })]
  });
};
export { Message };
const styles = StyleSheet.create({
  customMessageContainer: {
    flexDirection: 'row',
    padding: 10,
    alignItems: 'flex-end',
    position: 'relative'
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%'
    // backgroundColor: "rgba(0, 0, 0, 0.3)",
  },
  timestamp: {
    fontSize: 12,
    color: '#999',
    marginTop: 5,
    alignSelf: 'flex-end'
  }
});
//# sourceMappingURL=Message.js.map