import React from 'react';
import { ContactList } from '@tencentcloud/chat-uikit-react';
import { ContactItemType } from '@tencentcloud/chat-uikit-react';

function HiddenGroupsContactList() {
  const groupConfig = {
    [ContactItemType.BLACK]: {
      title: '黑名单',
      hidden: true // 隐藏黑名单分组
    },
    [ContactItemType.GROUP_REQUEST]: {
      title: '群组申请',
      hidden: true // 隐藏群组申请分组
    }
  };

  return (
    <ContactList
      groupConfig={groupConfig}
      onContactItemClick={(item) => {
        console.log('联系人点击:', item);
      }}
    />
  );
}

import React from 'react';
import { ContactInfo, GroupMemberRole } from '@tencentcloud/uikit-component-react';
import type { GroupInfoProps, GroupModel } from '@tencentcloud/uikit-component-react';
import { Button } from '@tencentcloud/uikit-base-component-react';

// 自定义群组信息组件
const CustomGroupInfo: React.FC<GroupInfoProps> = ({ 
  group, 
  showActions, 
  onClose, 
  onEnterGroup,
  onLeaveGroup,
  onDismissGroup 
}) => {
  const isOwner = group.selfInfo?.role === GroupMemberRole.OWNER; // 群主
  const isAdmin = group.selfInfo?.role === GroupMemberRole.ADMIN; // 管理员

  return (
    <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
        <img 
          src={group.avatar} 
          alt="group avatar" 
          style={{ width: '60px', height: '60px', borderRadius: '8px', marginRight: '16px' }}
        />
        <div>
          <h3 style={{ margin: '0 0 4px 0' }}>{group.name}</h3>
          <p style={{ margin: '0', color: '#666' }}>
            群组ID: {group.groupID}
          </p>
        </div>
      </div>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
        <p><strong>群组介绍:</strong> {group.introduction}</p>
        <p><strong>群组公告:</strong> {group.notification}</p>
        <p><strong>成员数量:</strong> {group.memberCount}/{group.maxMemberCount}</p>
        <p><strong>我的角色:</strong> {
          isOwner ? '群主' : isAdmin ? '管理员' : '普通成员'
        }</p>
      </div>

      {showActions && (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button onClick={() => onEnterGroup?.(group)}>进入群组</Button>
          <Button onClick={() => onLeaveGroup?.(group)}>退出群组</Button>
          {isOwner && (
            <Button onClick={() => onDismissGroup?.(group)}>解散群组</Button>
          )}
          <Button onClick={onClose}>关闭</Button>
        </div>
      )}
    </div>
  );
};

function CustomGroupInfoDemo() {
  const groupData = {
    type: ContactItemType.GROUP,
    data: {
      groupID: 'group123',
      name: '技术交流群',
      avatar: 'https://example.com/group-avatar.jpg',
      type: 'Public',
      introduction: '技术交流与分享',
      notification: '欢迎加入技术交流群',
      ownerID: 'owner123',
      memberCount: 100,
      maxMemberCount: 200,
      selfInfo: {
        userID: 'currentUser',
        role: GroupMemberRole.OWNER, // 群主
        nameCard: '群主',
        joinTime: Date.now(),
      },
    },
  };

  return (
    <ContactInfo 
      contactItem={groupData}
      GroupInfoComponent={CustomGroupInfo}
      onEnterGroup={(group) => console.log('进入群组:', group.name)}
      onLeaveGroup={(group) => console.log('退出群组:', group.name)}
      onDismissGroup={(group) => console.log('解散群组:', group.name)}
    />
  );
}