import { Comment, Drawer, Input, List, Tag } from 'antd';
import produce from 'immer';
import _ from 'lodash';
import React, { useState } from 'react';
import { patchUpdateRoom } from '../services/chat';
import styles from '../style.module.css';
import CustomizedAvatar from './CustomizedAvatar';
import IconFont from './IconFonts';
import UserInfoPop from './UserInfoPop';
const MessageHeader = ({ username, setDrawerVisible, setAddVisible, visible, setVisible, chat, onChatSet, members, }) => {
    const [editing, setEditing] = useState(false);
    const [filteredUser, setFilteredUser] = useState('');
    return (<>
      <div className={styles.messageHeader}>
        <div className={styles.messageHeaderMenu} onClick={() => setDrawerVisible(true)}>
          <IconFont icon="icon-menu"/>
        </div>
        {chat.room && [
            <div className={styles.messageHeaderTitle} onDoubleClick={() => setEditing(true)}>
            {editing ? (<Input defaultValue={chat.room.name || '未命名'} bordered={false} onChange={(e) => {
                        onChatSet(produce(chat, (draft) => {
                            draft.room.name = e.target.value;
                        }));
                    }} autoFocus onPressEnter={() => {
                        if (chat.room) {
                            patchUpdateRoom(username, chat.room.id, chat.room.name, chat.room.allow_user_ids).then(() => setEditing(false));
                        }
                    }} onBlur={() => {
                        setEditing(false);
                    }}/>) : (<div>
                {chat.room.name || '未命名'}（{chat.room.allow_user_ids.length} ）
                <IconFont icon="icon-pencil-edit" className={styles.editIcon} onClick={() => {
                        setEditing(true);
                    }}/>
              </div>)}
          </div>,
            <div>
            <IconFont icon="icon-ellipsis-options-vertical" className="cursor-pointer pr-4 text-xl font-bold" onClick={() => setVisible(!visible)}/>
          </div>,
        ]}
      </div>
      {chat.room && (<Drawer visible={visible} onClose={() => setVisible(false)} forceRender width={240} drawerStyle={{ borderLeft: '1px solid var(--gray-100)' }} getContainer={false} closable={false} mask={false} className={styles.userlistDrawer}>
          <div className={styles.searchInputContainer}>
            <Input className={styles.searchInput} placeholder="搜索" allowClear onChange={(e) => setFilteredUser(e.target.value)} suffix={<IconFont icon="icon-plus" className={styles.addRoomIcon} onClick={() => setAddVisible(true)}/>}/>
          </div>
          <List dataSource={_.sortBy(members.filter((v) => v.user_name.includes(filteredUser)), (a) => a.user_id !== chat.room?.creator_id)} renderItem={(item) => (<li key={item.id} className="flex items-center leading-loose">
                <Comment avatar={<UserInfoPop chat={chat} user={members.filter((u) => u.user_id === item.user_id)[0]}>
                      <CustomizedAvatar src={item.avatar} className="ml-4"/>
                    </UserInfoPop>} content={<span>
                      {item.user_name}
                      {chat.room?.creator_id === item.user_id && (<Tag className="ml-2" color="green">
                          群主
                        </Tag>)}
                    </span>}/>
              </li>)}/>
        </Drawer>)}
    </>);
};
export default MessageHeader;
//# sourceMappingURL=MessageHeader.jsx.map