import { memo } from 'react';
import { MessageStatus } from 'tuikit-atomicx-react/chat';
import MessageLayout from './MessageLayout';
import type { MessageAction, MessageAlignmentType } from '../../../types/message';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

interface MessageProps {
  alignment?: MessageAlignmentType | undefined;
  isLastInChunk?: boolean;
  message: MessageInfo;
  nick?: string | undefined;
  messageActionList?: MessageAction[] | undefined;
  messageAvatar?: React.ComponentType<{ messageInfo: MessageInfo }> | undefined;
  isHiddenMessageNick?: boolean | undefined;
  isHiddenMessageAvatar?: boolean | undefined;
  removeAvatar?: boolean | undefined;
  isAggregated?: boolean | undefined;
  // --- style props ---
  style?: React.CSSProperties | undefined;
  className?: string | undefined;
}

const Message = memo((props: MessageProps) => {
  const {
    alignment,
    className,
    isLastInChunk,
    message,
    nick,
    messageActionList,
    messageAvatar,
    isHiddenMessageAvatar,
    removeAvatar,
    isHiddenMessageNick,
    isAggregated,
    style,
  } = props;

  if (message.status === MessageStatus.Deleted) {
    return null;
  }

  return (
    <MessageLayout
      alignment={alignment}
      isLastInChunk={isLastInChunk}
      message={message}
      nick={nick}
      messageActionList={messageActionList}
      messageAvatar={messageAvatar}
      isHiddenMessageNick={isHiddenMessageNick}
      isHiddenMessageAvatar={isHiddenMessageAvatar}
      removeAvatar={removeAvatar}
      isAggregated={isAggregated}
      style={style}
      className={className}
    />
  );
});

Message.displayName = 'Message';

export { Message };
export type { MessageProps };