import { useMemo } from 'react';
import { MessageType } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import { View } from 'tuikit-atomicx-react/chat';
import { isCallMessage as _isCallMessage, isCreateGroupMessage, parseCallMessageText } from '../../../../utils/call';
import classes from './GroupTipMessage.module.scss';
import { resolveGroupTipMessage } from './resolveGroupTipMessage';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

interface GroupTipMessageProps {
  message: MessageInfo;
}

const GroupTipMessage = (props: GroupTipMessageProps) => {
  const { message } = props;

  const { t } = useUIKit();

  const isCallMessage = useMemo<boolean>(() => _isCallMessage(message), [message.msgID]);

  const callMessageText = useMemo<string>(() => parseCallMessageText(message), [message.msgID]);

  const renderText = useMemo<string>(() => {
    if (message.messageType === MessageType.Custom && isCreateGroupMessage(message)) {
      const {
        nameCard,
        nickname,
        userID,
      } = message.from;
      return `${nameCard || nickname || userID} ${t('MessageList.create_group')}`;
    }
    if (isCallMessage) {
      return callMessageText;
    }
    if (message.messageType === MessageType.Tips) {
      return resolveGroupTipMessage(message).text;
    }
    return '';
  }, [message.msgID]);

  return (
    <View className={classes['group-tip-message']}>
      {renderText}
    </View>
  );
};

export default GroupTipMessage;