import { useEffect, useRef } from 'react';
import { useUIKit, IconCloseCircle } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import {
  MessageType,
  View,
  useChatContext,
} from 'tuikit-atomicx-react/chat';
import { useChatUIState } from '../../../context/useChatUIState';
import { transformTextWithEmojiKeyToName } from '../../../utils/emoji';
import { markdownToPlainText } from '../../../utils/markdown';
import classes from './QuotedMessagePreview.module.scss';
import type { CustomMessagePayload, MessageInfo, StreamMessagePayload } from 'tuikit-atomicx-react/chat';

interface QuotedMessagePreviewProps {
  className?: string;
  style?: React.CSSProperties;
}

const QuotedMessagePreview = ({ className = '', style = {} }: QuotedMessagePreviewProps) => {
  const { t } = useUIKit();
  const { activeConversationID } = useChatContext();
  const { focusInput, quotedMessage, setQuotedMessage } = useChatUIState();

  const oldActiveConversationID = useRef(activeConversationID);

  useEffect(() => {
    if (quotedMessage) {
      focusInput();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [quotedMessage, focusInput]);

  useEffect(() => {
    if (activeConversationID && activeConversationID !== oldActiveConversationID.current) {
      setQuotedMessage(undefined);
    }
    oldActiveConversationID.current = activeConversationID;
  }, [activeConversationID, setQuotedMessage]);

  if (!quotedMessage) {
    return null;
  }

  function handleCloseQuotedMessage() {
    setQuotedMessage(undefined);
  }

  function calculateReferenceContent(message: MessageInfo | undefined): string {
    if (!message) {
      return '';
    }
    switch (message.messageType) {
      case MessageType.Text:
        return transformTextWithEmojiKeyToName(message.messagePayload?.text || '');
      case MessageType.Image:
        return `[${t('MessageInput.image')}]`;
      case MessageType.Audio:
        return `[${t('MessageInput.audio')}]`;
      case MessageType.Video:
        return `[${t('MessageInput.video')}]`;
      case MessageType.File:
        return `[${t('MessageInput.file')}]`;
      case MessageType.Custom:
        return (message.messagePayload as CustomMessagePayload)?.description || `[${t('MessageInput.custom_message')}]`;
      case MessageType.Stream:
        return markdownToPlainText((message.messagePayload as StreamMessagePayload)?.markdown || '')
          || `[${t('MessageInput.unknown')}]`;
      default:
        return `[${t('MessageInput.unknown')}]`;
    }
  }

  return (
    <View className={cs(classes.quoted__message__preview, className)} style={style}>
      <View className={classes.quoted__message__preview__content}>
        <View className={classes['quoted__message__preview__content--header']}>
          <View className={classes['quoted__message__preview__content--title']}>
            {quotedMessage.from.nickname || quotedMessage.from.userID}
          </View>
        </View>
        <View className={classes['quoted__message__preview__content--text']}>
          {calculateReferenceContent(quotedMessage)}
        </View>
      </View>
      <IconCloseCircle
        className={classes.quoted__message__preview__close}
        onClick={handleCloseQuotedMessage}
      />
    </View>
  );
};

QuotedMessagePreview.displayName = 'QuotedMessagePreview';

export {
  QuotedMessagePreview,
};