/* eslint-disable react/no-array-index-key */
import type { CSSProperties } from 'react';
import UserLink from '../UserInfo/link';

export interface MentionTextProps {
  text: string;
  /** 分隔符，默认为(' ') */
  split?: string;
  /** 弃用文本，会覆盖text文本 */
  discard?: string;
  style?: CSSProperties;
}

const MentionText = (props: MentionTextProps) => {
  const { text, split = ' ', discard, style } = props;
  return (
    <p
      style={{
        ...style,
        color: discard ? 'rgba(0,0,0,0.3)' : '',
        textDecoration: discard ? 'line-through' : '',
      }}
    >
      {discard ||
        text.split(split).map((item, index) => {
          const marginLeft = index === 0 ? 0 : 4;
          const res = /@([^(]+)\(([^)]+)\)/g.exec(item);
          if (res && res[0] === item) {
            const [, nameZh, account] = res;
            return (
              <div
                key={`split_ul_${index}`}
                style={{
                  display: 'inline',
                  backgroundColor: 'rgba(241,102,34,0.16)',
                  borderRadius: 12,
                  fontSize: 12,
                }}
              >
                <span style={{ marginLeft, color: '#f16622' }}>@</span>
                <UserLink
                  user={{ nameZh, account }}
                  bracket={'en'}
                  userWrapStyle={{ display: 'contents' }}
                />
              </div>
            );
          }
          return (
            <span key={`split_msg_${index}`} style={{ display: 'inline', marginLeft }}>
              {item}
            </span>
          );
        })}
    </p>
  );
};

export default MentionText;