import type React from 'react';
import { FriendApplicationType } from 'tuikit-atomicx-react/chat';
import { useUIKit, Button } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './FriendApplicationItem.module.scss';
import type { FriendApplicationItemProps } from '../../../../types/contact';

export const FriendApplicationItem: React.FC<FriendApplicationItemProps> = ({
  application,
  isActive,
  onClick,
  onAction,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const handleClick = () => onClick?.(application);
  const handleAction = (action: 'accept' | 'refuse', e: React.MouseEvent) => {
    e.stopPropagation();
    onAction?.(action, application);
  };

  return (
    <div
      className={cs(styles.friendApplicationItem, className, isActive && styles['friendApplicationItem--active'])}
      style={style}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
    >
      <div className={styles.friendApplicationItem__avatar}>
        <Avatar
          {...(application.avatarURL && { src: application.avatarURL })}
          alt={application.nickname || application.userID}
        />
      </div>
      <div className={styles.friendApplicationItem__content}>
        <div className={styles.friendApplicationItem__name}>
          {application.nickname || application.userID}
        </div>
        <div className={styles.friendApplicationItem__text}>
          {
            application.type === FriendApplicationType.Received
              ? t('ContactList.request_to_add_you_as_friend')
              : t('ContactList.wait_to_add_you_as_friend')
          }
        </div>
      </div>
      {application.type === FriendApplicationType.Received && (
        <div className={styles.friendApplicationItem__actions}>
          <Button
            type="primary"
            size="small"
            onClick={e => handleAction('accept', e)}
          >
            {t('ContactList.agree')}
          </Button>
        </div>
      )}
    </div>
  );
};