import { Drawer } from 'antd';
import React from 'react';
import { useMediaQuery } from 'react-responsive';

import RoomList from './components/RoomList';
import styles from './style.module.css';
import { xs } from './utils/responsive';
import { saveNecessaryData } from './utils/utils';

type PropType = {
  username: string;
  to: (room_id?: string) => void;
  user_id: string;
  members: any[];
  token: string;
  grpcHost: string;
  clientID: string;
};

const ChatView: React.FC<PropType> = ({ username, to, user_id, members, token, clientID, grpcHost }) => {
  saveNecessaryData(token, grpcHost, clientID)
  const isXs = useMediaQuery(xs);
  return (
    <div className={styles.chatContainer}>
      <div className={styles.roomHeader} />
      <div className={styles.roomContainer}>
        {isXs ? (
          <div className={styles.roomListDrawer}>
            <Drawer
              closable={false}
              getContainer={false}
              visible={true}
              placement="left"
            >
              <RoomList
                members={members}
                user_id={user_id}
                to={to}
                username={username}
                room_id=""
              />
            </Drawer>
          </div>
        ) : (
          <div className={styles.chatListContainer}>
            <div className={styles.chatListContainer}>
              <div className={styles.chatList}>
                <RoomList
                  members={members}
                  user_id={user_id}
                  to={to}
                  username={username}
                  room_id=""
                />
              </div>
            </div>
          </div>
        )}
        <div className="flex h-full overflow-hidden">
          <div className={styles.messagePanel} style={{ minHeight: 750 }}>
            <div className={`${styles.messageHeader} justify-start`}>
              <div className={styles.messageHeaderTitle}>聊天室</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatView;