import { Drawer } from 'antd';
import produce from 'immer';
import React, { useEffect, useState } from 'react';
import { useMediaQuery } from 'react-responsive';
import AddUserModal from './components/ChatModal';
import MessageInput from './components/index';
import MessageHeader from './components/MessageHeader';
import MessageList from './components/MessageList';
import RoomList from './components/RoomList';
import { useChannel } from './hooks/useWebSocket';
import { getRoom, patchUpdateRoom } from './services/chat';
import styles from './style.module.css';
import { xs } from './utils/responsive';
const ChatRoom = ({ room_id, username, to, user_id, members, qiniu_url }) => {
    const isXs = useMediaQuery(xs);
    const [chat, setChat] = useState({});
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [visible, setVisible] = useState(false);
    const [addVisible, setAddVisible] = useState(false);
    const [selectedUserIds, setSelectedUserIds] = useState([]);
    const [indeterminate, setIndeterminate] = React.useState(false);
    const [checkAll, setCheckAll] = React.useState(false);
    const onCheckAllChange = (e) => {
        setSelectedUserIds(e.target.checked
            ? members.filter((s) => chat.room?.allow_user_ids.every((i) => i !== s.user_id)).map((v) => v.user_id)
            : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked);
    };
    useChannel(`chat-room-record-${username}`, username, (obj) => {
        const { data } = obj;
        if (data.room_id !== room_id) {
            return;
        }
        if (data.message) {
            setChat(produce((draft) => {
                draft.records = chat.records.concat([data]);
            }));
        }
    }, { room_id });
    useEffect(() => {
        if (room_id) {
            getRoom(username, room_id)
                .then((res) => {
                setChat(produce((draft) => {
                    draft.records = res.records;
                    draft.room = res.room;
                    draft.onlineUserIDs = res.online_user_ids;
                }));
            })
                .catch(() => {
                to();
            });
        }
    }, [room_id, to, username]);
    const checked = (v) => {
        return chat.room
            ? selectedUserIds.includes(v.user_id) || chat.room.allow_user_ids.some((i) => i === v.user_id)
            : false;
    };
    const disabled = (v) => {
        return chat.room ? chat.room.allow_user_ids.some((i) => i === v.user_id) : true;
    };
    return (<div className={styles.chatContainer}>
      <div />
      <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} chat={chat} onChatSet={setChat} username={username} room_id="" setDrawerVisible={setDrawerVisible} to={to}/>
            </Drawer>
          </div>) : (<div className={styles.chatListContainer}>
            <div className={styles.chatListContainer}>
              <div className={styles.chatList}>
                <RoomList members={members} user_id={user_id} chat={chat} onChatSet={setChat} username={username} room_id={room_id} setDrawerVisible={setDrawerVisible} to={to}/>
              </div>
            </div>
          </div>)}
        <div className="flex h-full overflow-hidden">
          <div className={styles.messagePanel}>
            <MessageHeader username={username} drawerVisible={drawerVisible} setDrawerVisible={setDrawerVisible} setAddVisible={setAddVisible} visible={visible} setVisible={setVisible} chat={chat} onChatSet={setChat} members={members}/>
            <MessageList user_id={user_id} chat={chat} members={members}/>
            <div className={styles.messageInput}>
              <MessageInput qiniu_url={qiniu_url} roomId={room_id} username={username} members={members}/>
            </div>
          </div>
        </div>
      </div>
      <AddUserModal members={members} visible={addVisible} setVisible={setAddVisible} onCheckAllChange={onCheckAllChange} indeterminate={indeterminate} checkAll={checkAll} allowUserIds={selectedUserIds} setAllowUserIds={setSelectedUserIds} checked={(v) => checked(v)} disabled={(v) => disabled(v)} title="添加成员" okText="增加" defaultValue={chat.room ? chat.room.name : ''} onOk={() => {
            if (chat.room) {
                setChat(produce((draft) => {
                    if (draft.room) {
                        draft.room.allow_user_ids = chat.room.allow_user_ids.concat(selectedUserIds);
                    }
                }));
                patchUpdateRoom(username, chat.room.id, chat.room.name, selectedUserIds.concat(chat.room.allow_user_ids)).then(() => {
                    setVisible(false);
                    setAddVisible(false);
                    setSelectedUserIds([]);
                });
            }
        }}/>
    </div>);
};
export default ChatRoom;
//# sourceMappingURL=ChatRoom.jsx.map