import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import { BUBBLE_CLASS } from 'src/pages/dashboard/Conversations/constants';
import { type ConversationMessage } from 'src/pages/dashboard/Conversations/types';

type MessageBubbleProps = {
  isLoggedUser: boolean;
  message: ConversationMessage;
  children: React.ReactNode;
  onMouseUp: (event: React.MouseEvent<HTMLDivElement>) => void;
  onMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
  onMouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
};

const MessageBubble = ({
  isLoggedUser,
  message,
  children,
  onMouseUp,
  onMouseEnter,
  onMouseMove,
}: MessageBubbleProps) => {
  const theme = useTheme();
  const { reactions } = message;
  const bubbleRadius = theme.shape.borderRadius;

  const normalBgColor = isLoggedUser
    ? theme.palette.new.background.elements.brand
    : theme.palette.new.background.layout.tertiary;

  return (
    <Stack
      className={BUBBLE_CLASS}
      onMouseUp={onMouseUp}
      onMouseEnter={onMouseEnter}
      onMouseMove={onMouseMove}
      id={message.hu_data.message_ts}
      sx={{
        wordBreak: 'break-word',
        position: 'relative',
        border: `1px solid ${
          isLoggedUser
            ? theme.palette.new.border.neutral.brand
            : theme.palette.new.border.neutral.default
        }`,
        borderTopLeftRadius: isLoggedUser ? bubbleRadius : 0,
        borderTopRightRadius: isLoggedUser ? 0 : bubbleRadius,
        borderBottomLeftRadius: bubbleRadius,
        borderBottomRightRadius: bubbleRadius,
        padding: 1,
        gap: 0.5,
        width: 'fit-content',
        maxWidth: '600px',
        backgroundColor: normalBgColor,
        transition: 'background-color 0.3s ease-in-out',
        '&:hover .message-setting': {
          opacity: 1,
        },
        mb: reactions.length > 0 ? 0.25 : 0,
      }}
    >
      {children}
    </Stack>
  );
};

export default MessageBubble;