import { Drawer } from 'antd';
import React, { useState } from 'react';
import { useMediaQuery } from 'react-responsive';
import RoomList from './components/RoomList';
import styles from './style.module.css';
import { xs } from './utils/responsive';
const ChatView = ({ username, to, user_id, members }) => {
    const [drawerVisible, setDrawerVisible] = useState(false);
    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={drawerVisible} onClose={() => setDrawerVisible(false)} placement="left">
              <RoomList members={members} user_id={user_id} to={to} username={username} room_id="" setDrawerVisible={setDrawerVisible}/>
            </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="" setDrawerVisible={setDrawerVisible}/>
              </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;
//# sourceMappingURL=ChatList.jsx.map