import type React from 'react';
import { useMemo } from 'react';
import { FriendApplicationType } from 'tuikit-atomicx-react/chat';
import { ContactStore } from 'tuikit-atomicx-react/chat';
import { useUIKit, Button } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './FriendApplicationInfo.module.scss';
import type { FriendApplicationInfoProps } from '../../../../types/contact';

type FriendApplicationDisplayStatus = 'pending' | 'accepted' | 'rejected' | 'handled';

export const FriendApplicationInfo: React.FC<FriendApplicationInfoProps> = ({
  application,
  showActions = true,
  onClose,
  onAccept,
  onRefuse,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const {
    acceptFriendApplication,
    refuseFriendApplication,
    friendApplicationList,
    friendList,
  } = ContactStore();

  const displayStatus = useMemo<FriendApplicationDisplayStatus>(() => {
    const isFriend = friendList.some(friend => friend.userID === application.userID);
    const isApplicationPending = friendApplicationList.some(item => item.userID === application.userID);

    // Friend relation wins because a removed application can mean it was accepted.
    if (isFriend) {
      return 'accepted';
    }

    if (!isApplicationPending) {
      return application.type === FriendApplicationType.Sent ? 'rejected' : 'handled';
    }

    return 'pending';
  }, [application.type, application.userID, friendApplicationList, friendList]);

  const sentApplicationText = useMemo(() => {
    if (displayStatus === 'accepted') {
      return t('ContactList.friend_application_accepted');
    }
    if (displayStatus === 'rejected') {
      return t('ContactList.friend_application_rejected');
    }
    return t('ContactList.wait_to_add_you_as_friend');
  }, [displayStatus, t]);

  const receivedApplicationText = useMemo(() => {
    if (displayStatus === 'accepted') {
      return t('ContactList.friend_application_accepted');
    }
    if (displayStatus === 'handled') {
      return t('ContactList.friend_application_handled');
    }
    return '';
  }, [displayStatus, t]);

  const shouldShowReceivedActions = showActions
    && application.type === FriendApplicationType.Received
    && displayStatus === 'pending';

  const handleAccept = async () => {
    onAccept?.(application);
    await acceptFriendApplication(application);
    onClose?.();
  };
  const handleRefuse = async () => {
    onRefuse?.(application);
    await refuseFriendApplication(application);
    onClose?.();
  };

  return (
    <div className={classNames(styles['contact-friend-application-info'], className)} style={style}>
      <div className={styles['contact-friend-application-info__header']}>
        <div className={styles['contact-friend-application-info__main-info']}>
          <div className={styles['contact-friend-application-info__name']}>
            {application?.nickname || application?.userID}
          </div>
          <div className={styles['contact-friend-application-info__id']}>
            {`${t('ContactList.id')}: ${application?.userID}`}
          </div>
        </div>
        <div className={styles['contact-friend-application-info__avatar-wrap']}>
          <Avatar
            {...(application?.avatarURL && { src: application?.avatarURL })}
            alt={application?.nickname || application.userID}
            size={48}
          />
        </div>
      </div>
      <div className={styles['contact-friend-application-info__rows']}>
        <div className={styles['contact-friend-application-info__row']}>
          <div className={styles['contact-friend-application-info__row-label']}>
            {t('ContactList.verification_info')}
          </div>
          <div className={styles['contact-friend-application-info__row-value']}>
            {application?.addWording || t('ContactList.none')}
          </div>
        </div>
      </div>
      {shouldShowReceivedActions && (
        <div className={styles['contact-friend-application-info__actions']}>
          <Button
            className={styles['contact-friend-application-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            onClick={handleAccept}
          >
            {t('ContactList.agree')}
          </Button>
          <Button
            className={styles['contact-friend-application-info__button--secondary']}
            type="default"
            size="big"
            radius="round"
            color="red"
            onClick={handleRefuse}
          >
            {t('ContactList.refuse')}
          </Button>
        </div>
      )}
      {showActions && application.type === FriendApplicationType.Received && displayStatus !== 'pending' && (
        <div className={styles['contact-friend-application-info__rows']}>
          <div className={styles['contact-friend-application-info__row']}>
            <div className={styles['contact-friend-application-info__row-label']}>
              {receivedApplicationText}
            </div>
          </div>
        </div>
      )}
      {showActions && application.type === FriendApplicationType.Sent && (
        <div className={styles['contact-friend-application-info__rows']}>
          <div className={styles['contact-friend-application-info__row']}>
            <div
              className={classNames(
                styles['contact-friend-application-info__row-label'],
                displayStatus === 'rejected' && styles['contact-friend-application-info__row-label--rejected'],
              )}
            >
              {sentApplicationText}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};