import { memo, useMemo } from 'react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { renderMarkdown } from '../../../../utils/markdown';
import classes from './StreamMessage.module.scss';
import type { MessageInfo, StreamMessagePayload } from 'tuikit-atomicx-react/chat';

interface StreamMessageProps {
  message: MessageInfo;
}

const StreamMessage = memo((props: StreamMessageProps) => {
  const { message } = props;
  const payload = message.messagePayload as StreamMessagePayload;
  const html = useMemo(() => renderMarkdown(payload.markdown), [payload.markdown]);

  return (
    <View
      className={cs(classes['stream-message'], {
        [classes['stream-message--self']]: message.isSentBySelf,
        [classes['stream-message--other']]: !message.isSentBySelf,
      })}
      aria-busy={!payload.isStreamEnded}
    >
      <div
        className={classes['stream-message__content']}
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </View>
  );
});

StreamMessage.displayName = 'StreamMessage';

export default StreamMessage;