import type React from 'react';
import { useUIKit, Button } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { ContactStore } from 'tuikit-atomicx-react/chat';
import { ContactItemType } from '../../../../types/contact';
import { Avatar } from 'tuikit-atomicx-react/chat';
import { useContactList } from '../../hooks/useContactList';
import styles from './BlacklistInfo.module.scss';
import type { BlacklistInfoProps } from '../../../../types/contact';

export const BlacklistInfo: React.FC<BlacklistInfoProps> = ({
  profile,
  showActions = true,
  onRemoveFromBlacklist,
  onClose,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const { friendList, removeFromBlacklist } = ContactStore();
  const { setActiveContact } = useContactList();

  const handleRemoveFromBlacklist = async () => {
    await removeFromBlacklist(profile.userID);
    const friend = friendList.find(item => item.userID === profile.userID);

    if (friend) {
      setActiveContact({
        type: ContactItemType.FRIEND,
        data: friend,
      });
    } else {
      setActiveContact(undefined);
      onClose?.();
    }

    onRemoveFromBlacklist?.(profile);
  };

  return (
    <div className={classNames(styles['contact-blacklist-info'], className)} style={style}>
      <div className={styles['contact-blacklist-info__header']}>
        <div className={styles['contact-blacklist-info__main-info']}>
          <div className={styles['contact-blacklist-info__name']}>{profile.nickname || profile.userID}</div>
          <div className={styles['contact-blacklist-info__id']}>
            {t('ContactList.id')}
            ：
            {profile.userID}
          </div>
        </div>
        <div className={styles['contact-blacklist-info__avatar-wrap']}>
          <Avatar
            {...(profile.avatarURL && { src: profile.avatarURL })}
            alt={profile.nickname || profile.userID}
            size={48}
          />
        </div>
      </div>
      <div className={styles['contact-blacklist-info__rows']}>
        <div className={styles['contact-blacklist-info__row']}>
          <div className={styles['contact-blacklist-info__row-label']}>{t('ContactList.personal_signature')}</div>
          <div className={styles['contact-blacklist-info__row-value']}>
            <span className={styles['contact-blacklist-info__intro']}>
              {profile.aboutMe || t('ContactList.none')}
            </span>
          </div>
        </div>
      </div>
      {showActions && (
        <div className={styles['contact-blacklist-info__actions']}>
          <Button
            className={styles['contact-blacklist-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            onClick={handleRemoveFromBlacklist}
          >
            {t('ContactList.remove_from_blacklist')}
          </Button>
        </div>
      )}
    </div>
  );
};