import { Gender } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import { SearchType } from '../../../../../types/search';
import { birthdayToAge, highlightText } from '../../../../../utils';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './User.module.scss';
import type { ResultItemProps } from '../../../../../types/search';

export function User({ data, keyword, onClick }: ResultItemProps<SearchType.USER>) {
  const { profile } = data;
  const { t } = useUIKit();
  const getGenderText = (gender?: string) => {
    switch (gender) {
      case Gender.Male:
        return t('Search.Male');
      case Gender.Female:
        return t('Search.Female');
      default:
        return t('Search.Secret');
    }
  };

  return (
    <div className={styles.SearchUser} onClick={() => onClick?.(data, SearchType.USER)}>
      <div className={styles.SearchUser__avatar}>
        <Avatar
          src={profile?.avatarURL}
          alt={profile?.nickname || profile?.userID}
        />
      </div>
      <div className={styles.SearchUser__profile}>
        <div
          className={styles.SearchUser__nickname}
          dangerouslySetInnerHTML={{
            __html: highlightText(profile?.nickname || profile?.userID, keyword),
          }}
        />
        {profile?.selfSignature
          ? (
            <div
              className={styles.SearchUser__signature}
              dangerouslySetInnerHTML={{
                __html: highlightText(profile?.selfSignature, keyword),
              }}
            />
          )
          : (
            <div className={styles.SearchUser__signature}>
              {getGenderText(profile?.gender)}
              &nbsp;
              {profile?.birthday && `${birthdayToAge(profile.birthday)}${t('Search.Years Old')}`}
            </div>
          )}
      </div>
    </div>
  );
}

export default User;