import type React from 'react';
import { GroupMemberRole } from 'tuikit-atomicx-react/chat';
import { GroupStore, useUIContext } from 'tuikit-atomicx-react/chat';
import { Button, useUIKit } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { DEFAULT_GROUP_COMMON_AVATAR } from '../../../../constant/avatar';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './GroupInfo.module.scss';
import type { GroupInfoProps } from '../../../../types/contact';

export const GroupInfo: React.FC<GroupInfoProps> = ({
  group,
  showActions = true,
  onClose,
  onEnterGroup,
  onLeaveGroup,
  onDismissGroup,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const { setActiveConversation } = useUIContext();
  const { quitGroup, dismissGroup } = GroupStore();

  const selfRole = group?.selfRole || GroupMemberRole.Member;
  const canDismissGroup = selfRole === GroupMemberRole.Owner;
  const canQuitGroup = selfRole !== GroupMemberRole.Owner;

  const handleLeaveGroup = async () => {
    try {
      await quitGroup(group.groupID);
      onLeaveGroup?.(group);
    } catch (err: any) {
      console.error(err);
    }
    onClose?.();
  };

  const handleDismissGroup = async () => {
    try {
      await dismissGroup(group.groupID);
      onDismissGroup?.(group);
    } catch (err: any) {
      console.error(err);
    }
    onClose?.();
  };

  const handleEnterGroup = () => {
    setActiveConversation(`GROUP${group.groupID}`);
    onEnterGroup?.(group);
  };

  return (
    <div className={classNames(styles['contact-group-info'], className)} style={style}>
      <div className={styles['contact-group-info__header']}>
        <div className={styles['contact-group-info__main-info']}>
          <div className={styles['contact-group-info__name']}>{group.groupName || group.groupID}</div>
          <div className={styles['contact-group-info__id']}>
            {t('ContactList.group_id')}
            ：
            {group.groupID}
          </div>
        </div>
        <div className={styles['contact-group-info__avatar-wrap']}>
          <Avatar
            src={group.avatarURL || DEFAULT_GROUP_COMMON_AVATAR}
            alt={group.groupName || group.groupID}
            size={48}
          />
        </div>
      </div>
      <div className={styles['contact-group-info__rows']}>
        <div className={styles['contact-group-info__row']}>
          <div className={styles['contact-group-info__row-label']}>{t('ContactList.group_type')}</div>
          <div className={styles['contact-group-info__row-value']}>{group.groupType}</div>
        </div>
      </div>
      {showActions && (
        <div className={styles['contact-group-info__actions']}>
          <Button
            className={styles['contact-group-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            onClick={handleEnterGroup}
          >
            {t('ContactList.enter_group_chat')}
          </Button>
          {
            canDismissGroup && (
              <Button
                className={styles['contact-group-info__button--secondary']}
                type="default"
                size="big"
                radius="round"
                color="red"
                onClick={handleDismissGroup}
              >
                {t('ChatSetting.dismiss_group')}
              </Button>
            )
          }
          {
            canQuitGroup && (
              <Button
                className={styles['contact-group-info__button--secondary']}
                type="default"
                size="big"
                radius="round"
                color="red"
                onClick={handleLeaveGroup}
              >
                {t('ChatSetting.quit_group')}
              </Button>
            )
          }
        </div>
      )}
    </div>
  );
};