import { MessageType } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { useChatUIState } from '../../../../context/useChatUIState';
import { transformTextWithEmojiKeyToName } from '../../../../utils/emoji';
import classes from './RecalledMessage.module.scss';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

interface IRecalledMessageProps {
  message: MessageInfo;
  className?: string | undefined;
  style?: React.CSSProperties | undefined;
}

function RecalledMessage(props: IRecalledMessageProps) {
  const { message, className, style } = props;

  const { t } = useUIKit();
  const { insertInputContent, focusInput } = useChatUIState();

  const isTextMessage = message.messageType === MessageType.Text;
  const isMessageOwner = message.isSentBySelf;

  function recallMessageToInput() {
    insertInputContent(
      transformTextWithEmojiKeyToName(message.messagePayload?.text ?? ''),
    );
    focusInput();
  }

  if (isMessageOwner) {
    return (
      <View className={cs(classes['recalled-message'], className)} style={style}>
        {`${t('MessageList.you')}${t('MessageList.recalled_a_message')}`}
        {' '}
        {
          isTextMessage && (
            <View
              role="button"
              className={classes['recalled-message__button']}
              onClick={recallMessageToInput}
            >
              {t('MessageList.reedit')}
            </View>
          )
        }
      </View>
    );
  }

  const otherDisplayName = message.from?.nickname || message.from?.userID || '';

  return (
    <View className={classes['recalled-message']}>
      {`${otherDisplayName} ${t('MessageList.recalled_a_message')}`}
    </View>
  );
}

export default RecalledMessage;