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: 'blocklist',
      hidden: true // hide blocklist grouping
    },
    [ContactItemType.GROUP_REQUEST]: {
      title: 'Group Application',
      hidden: true // hide group application grouping
    }
  };

  return (
    <ContactList
      groupConfig={groupConfig}
      onContactItemClick={(item) => {
        console.log('contact person click:', 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';

// Custom Group Information Component
const CustomGroupInfo: React.FC<GroupInfoProps> = ({ 
  group, 
  showActions, 
  onClose, 
  onEnterGroup,
  onLeaveGroup,
  onDismissGroup 
}) => {
  const isOwner = group.selfInfo?.role === GroupMemberRole.OWNER; // group owner
  const isAdmin = group.selfInfo?.role === GroupMemberRole.ADMIN; // 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' }}>
            Group ID: {group.groupID}
          </p>
        </div>
      </div>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px',  marginBottom: '16px' }}>
        <p><strong>Group introduction:</strong> {group.introduction}</p>
        <p><strong>Group notice:</strong> {group.notification}</p>
        <p><strong>Member count:</strong> {group.memberCount}/{group.maxMemberCount}</p>
        <p><strong>My role:</strong> {
          isOwner ? 'group owner' : isAdmin ? 'admin' : 'ordinary member'
        }</p>
      </div>

      {showActions && (
        <div style={{ display: 'flex', gap: '8px' }}>
          <Button onClick={() => onEnterGroup?.(group)}>Enter group</Button>
          <Button onClick={() => onLeaveGroup?.(group)}>Exit group</Button>
          {isOwner && (
            <Button onClick={() => onDismissGroup?.(group)}>Dissolve group</Button>
          )}
          <Button onClick={onClose}>Close</Button>
        </div>
      )}
    </div>
  );
};

function CustomGroupInfoDemo() {
  const groupData = {
    type: ContactItemType.GROUP,
    data: {
      groupID: 'group123',
      name: 'technical exchange group',
      avatar: 'https://example.com/group-avatar.jpg',
      type: 'Public',
      introduction: 'technical exchange and sharing',
      notification: 'Welcome to join the technical exchange group',
      ownerID: 'owner123',
      memberCount: 100,
      maxMemberCount: 200,
      selfInfo: {
        userID: 'currentUser',
        role: GroupMemberRole.OWNER, // group owner
        nameCard: 'group owner',
        joinTime: Date.now(),
      },
    },
  };

  return (
    <ContactInfo 
      contactItem={groupData}
      GroupInfoComponent={CustomGroupInfo}
      onEnterGroup={(group) => console.log('Enter group:', group.name)}
      onLeaveGroup={(group) => console.log('Exit group:', group.name)}
      onDismissGroup={(group) => console.log('Dissolve group:', group.name)}
    />
  );
}