import type React from 'react';
import { GroupStore } 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 './GroupApplicationInfo.module.scss';
import type { GroupApplicationInfoProps } from '../../../../types/contact';

export const GroupApplicationInfo: React.FC<GroupApplicationInfoProps> = ({
  application,
  showActions = true,
  onClose,
  onAccept,
  onRefuse,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const { acceptApplication, refuseApplication } = GroupStore();

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

  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={classNames(styles['contact-group-application-info'], className)} style={style}>
      <div className={styles['contact-group-application-info__header']}>
        <div className={styles['contact-group-application-info__main-info']}>
          <div className={styles['contact-group-application-info__name']}>{displayName}</div>
          <div className={styles['contact-group-application-info__id']}>
            {t('ContactList.id')}
            ：
            {application.fromUser}
          </div>
          <div className={styles['contact-group-application-info__intro']}>{applicationText}</div>
        </div>
        <div className={styles['contact-group-application-info__avatar-wrap']}>
          <Avatar src={application.fromUserAvatarURL} size={48} />
        </div>
      </div>
      <div className={styles['contact-group-application-info__rows']}>
        <div className={styles['contact-group-application-info__row']}>
          <div className={styles['contact-group-application-info__row-label']}>
            {t('ContactList.application_note')}
          </div>
          <div className={styles['contact-group-application-info__row-value']}>
            {application.requestMsg || t('ContactList.none')}
          </div>
        </div>
      </div>
      {showActions && (
        <div className={styles['contact-group-application-info__actions']}>
          <Button
            className={styles['contact-group-application-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            onClick={handleAccept}
          >
            {t('ContactList.agree')}
          </Button>
          <Button
            className={styles['contact-group-application-info__button--secondary']}
            type="default"
            size="big"
            radius="round"
            color="red"
            onClick={handleRefuse}
          >
            {t('ContactList.refuse')}
          </Button>
        </div>
      )}
    </div>
  );
};