import { MessageType } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import { SearchType } from '../../../../../types/search';
import { highlightText } from '../../../../../utils';
import { transformTextWithEmojiKeyToName } from '../../../../../utils/emoji';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './Conversation.module.scss';
import type { ResultItemProps } from '../../../../../types/search';

export function Conversation({ data, keyword, onClick }: ResultItemProps<SearchType.MESSAGE>) {
  const { t } = useUIKit();
  const {
    conversationID,
    conversationAvatarURL,
    conversationShowName,
    messageCount,
    messageList,
  } = data;

  const avatar = conversationAvatarURL;
  const name = conversationShowName || conversationID;

  // Try to extract the first matched text-message snippet; fall back to a count summary.
  const messageText = (() => {
    const firstMsg = messageList?.[0];
    if (firstMsg && firstMsg.messageType === MessageType.Text) {
      const payload = firstMsg.messagePayload as any;
      if (typeof payload?.text === 'string') {
        return payload.text;
      }
      if (Array.isArray(payload?.text)) {
        return payload.text
          .filter((item: any) => item.name === 'text')
          .map((item: any) => item.text)
          .join('');
      }
    }
    return t('Search.Found Messages', { count: messageCount });
  })();

  return (
    <div className={styles.conversationItem} onClick={() => onClick?.(data, SearchType.MESSAGE)}>
      <div className={styles.avatarWrapper}>
        <Avatar src={avatar} alt={name} />
      </div>
      <div className={styles.conversationContent}>
        <div className={styles.conversationHeader}>
          <span
            className={styles.name}
            dangerouslySetInnerHTML={{ __html: highlightText(name, keyword) }}
          />
        </div>
        <div
          className={styles.showText}
          dangerouslySetInnerHTML={{ __html: highlightText(transformTextWithEmojiKeyToName(messageText), keyword) }}
        />
      </div>
    </div>
  );
}

export default Conversation;