import React, { useMemo } from 'react';
import { Typography } from '@mui/material';
import { ChatMessageBalloonProps } from '../../interfaces';
import * as S from './ChatMessageBalloon.style'

export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ 
    label, 
    description, 
    date,
    direction,
    children,
    className,
    bottomChildren,
    onMouseEnter,
    onMouseLeave,
    onRowMouseEnter,
    onRowMouseLeave,
    highlight,
    ...rest 
  }) => {

  const ballonClassNames = useMemo(() => {
    const classNames = []
    if(!!onMouseEnter) classNames.push('is-interactive')
    if(!!highlight) classNames.push('is-highlight')
    return classNames.join(" ")
  }, [highlight, onMouseEnter])

  return (
    <S.ChatMessageBalloonContainerStyle className={className} {...rest}>
      <S.ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
        <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={ballonClassNames}>
          <Typography
            variant="subtitle2"
            style={{
              fontSize: "1rem",
              fontWeight: "600",
              marginBottom: '5px'
            }}
          >
            {label}
          </Typography>
          {description}
        </S.ChatMessageBalloonStyle>
        <S.ChatMessageChildrenStyle direction={direction}>
          {children}
        </S.ChatMessageChildrenStyle>
      </S.ChatMessageBalloonRowStyle>
      <S.ChatMessageBalloonRowStyle direction={direction} sx={{gap: "10px"}}>
        <S.ChatMessageDateStyle fontSize={"0.7rem"}>{date}</S.ChatMessageDateStyle>
        {bottomChildren}
      </S.ChatMessageBalloonRowStyle>
    </S.ChatMessageBalloonContainerStyle>
  );
};