import {
  UIKitProvider,
  useLoginState,
  LoginStatus,
  ConversationList,
  Chat,
  ChatHeader,
  MessageList,
  MessageInput,
  ContactList,
  ContactInfo,
  useUIKit,
  useConversationListState,
} from "@tencentcloud/chat-uikit-react";
import { useEffect, useState } from "react";
import './App.css';

function App() {
  // 语言支持 en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // 主题支持 light(default) / dark
  return (
    <UIKitProvider theme={'light'} language={'en-US'}>
      <ChatApp />
    </UIKitProvider>
  );
}

function ChatApp() {
  const [activeTab, setActiveTab] = useState('chats');
  
  const { language } = useUIKit();
  const texts = language === 'zh-CN'
    ? { chats: '会话', contacts: '联系人', emptyTitle: '暂无会话', emptySub: '选择一个会话开始聊天', error: '请检查 SDKAppID, userID, userSig, 通过开发人员工具(F12)查看具体的错误信息', loading: '登录中...' }
    : { chats: 'Chats', contacts: 'Contacts', emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...'};

  const { status } = useLoginState({
    SDKAppID: 0, // type: number
    userID: '',  // type: string
    userSig: '', // type: string
  })
  const { setActiveConversation } = useConversationListState();

  useEffect(() => {
    async function init() {
      // 你可以换成其他已创建的 userID
      const userID = 'administrator';
      const conversationID = `C2C${userID}`;
      setActiveConversation(conversationID);
    }

    if (status === LoginStatus.SUCCESS) {
      init();
    }
  }, [status]);

  if (status === LoginStatus.ERROR) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <div className="loading-text">{texts.error}</div>
      </div>
    )
  }

  if (status !== LoginStatus.SUCCESS) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <div className="loading-text">{texts.loading}</div>
      </div>
    )
  }

  return (
    <div className="chat-app">
      <ul className="vertical-tabs">
        <li 
          className={`tab-item ${activeTab === 'chats' ? 'active' : ''}`}
          onClick={() => {setActiveTab('chats')}}
        >
          {texts.chats}
        </li>
        <li 
          className={`tab-item ${activeTab === 'contacts' ? 'active' : ''}`}
          onClick={() => {setActiveTab('contacts')}}
        >
          {texts.contacts}
        </li>
      </ul>
      {
        activeTab === 'chats' && (
          <>
            <ConversationList style={{ flex: '0 0 300px'}}/>
            <Chat
              className="chat-box"
              PlaceholderEmpty={
                <div className="empty-chat">
                  <div className="empty-icon">💬</div>
                  <div className="empty-title">{texts.emptyTitle}</div>
                  <div className="empty-subtitle">{texts.emptySub}</div>
                </div>
              }
            >
              <ChatHeader />
              <MessageList />
              <MessageInput />
            </Chat>
          </>
        )
      }
      {
        activeTab === 'contacts' && (
          <>
            <ContactList style={{ flex: '0 0 300px'}}/>
            <ContactInfo
              style={{ flex: '1'}}
              onSendMessage={() => {setActiveTab('chats')}}
              onEnterGroup={() => {setActiveTab('chats')}}
            />
          </>
        )
      }
    </div>
  );
}

export default App;