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

export const GroupApplicationItem: React.FC<GroupApplicationItemProps> = ({
  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);
  };

  const displayName = application.fromUserNickname || application.fromUser || '';
  const groupName = application.groupID;
  const isInvite = application.type?.includes('invite');
  const applicationText = !isInvite
    ? `${t('ContactList.apply_to_join_group')}"${groupName}"`
    : `${t('ContactList.invite_you_to_join_group')}"${groupName}"`;

  return (
    <div
      className={cs(styles.groupApplicationItem, className, isActive && styles['groupApplicationItem--active'])}
      style={style}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
    >
      <div className={styles.groupApplicationItem__avatar}>
        <Avatar src={application.fromUserAvatarURL} alt={displayName} />
      </div>
      <div className={styles.groupApplicationItem__content}>
        <div className={styles.groupApplicationItem__name}>{displayName}</div>
        <div className={styles.groupApplicationItem__text}>{applicationText}</div>
      </div>
      <div className={styles.groupApplicationItem__actions}>
        <Button
          type="primary"
          size="small"
          onClick={e => handleAction('accept', e)}
        >
          {t('ContactList.agree')}
        </Button>
      </div>
    </div>
  );
};