import type React from 'react';
import { MessageType } from 'tuikit-atomicx-react/chat';
import { transformTextWithEmojiKeyToName } from '../../../../utils/emoji';
import { markdownToPlainText } from '../../../../utils/markdown';
import { HighlightText } from '../HighlightText';
import styles from './SearchMessageItem.module.scss';
import type { MessageInfo } from 'tuikit-atomicx-react/chat';

interface SearchMessageItemProps {
  message: MessageInfo;
  /** Keyword to highlight within text content. */
  keyword?: string;
}

/**
 * Renders a single search-result message's content preview.
 *
 * `MessageInfo` is a discriminated union keyed by `messageType`, so accessing
 * `message.messagePayload` inside each `case` narrows the payload to its exact
 * shape — no type assertions needed. Do NOT destructure messagePayload before
 * the switch, or narrowing is lost.
 */
export function SearchMessageItem({ message, keyword = '' }: SearchMessageItemProps): React.ReactNode {
  switch (message.messageType) {
    case MessageType.Text:
      return (
        <div className={styles.SearchMessageItem__text}>
          <HighlightText text={transformTextWithEmojiKeyToName(message.messagePayload.text)} keyword={keyword} />
        </div>
      );
    case MessageType.Image:
      return (
        <img
          className={styles.SearchMessageItem__imageThumb}
          src={message.messagePayload.thumbImageURL || message.messagePayload.originalImageURL || ''}
          alt=""
        />
      );
    case MessageType.Video:
      return (
        <div className={styles.SearchMessageItem__videoThumb}>
          <img src={message.messagePayload.videoSnapshotURL || ''} alt="" />
        </div>
      );
    case MessageType.File:
      return (
        <div className={styles.SearchMessageItem__text}>
          {message.messagePayload.fileName}
        </div>
      );
    case MessageType.Audio:
      return (
        <div className={styles.SearchMessageItem__text}>
          {`${message.messagePayload.audioDuration}s`}
        </div>
      );
    case MessageType.Custom:
      return (
        <div className={styles.SearchMessageItem__text}>
          <HighlightText text={message.messagePayload.description || ''} keyword={keyword} />
        </div>
      );
    case MessageType.Stream:
      return (
        <div className={styles.SearchMessageItem__text}>
          <HighlightText text={markdownToPlainText(message.messagePayload.markdown)} keyword={keyword} />
        </div>
      );
    default:
      return null;
  }
}

export default SearchMessageItem;