import { Avatar, Card, Checkbox, Input, Modal, Space } from 'antd';
import _ from 'lodash';
import React, { useState } from 'react';
import styles from '../style.module.css';
import IconFont from './IconFonts';
const ChatModal = ({ visible, setVisible, onCheckAllChange, indeterminate, checkAll, allowUserIds, setAllowUserIds, onOk, disabled, checked, title, okText, defaultValue, members, }) => {
    const [roomName, setRoomName] = useState('');
    return (<Modal title={title} visible={visible} className={styles.createModal} onCancel={() => setVisible(false)} okText={okText} okButtonProps={{
            disabled: allowUserIds.length === 0,
        }} onOk={() => {
            if (allowUserIds.length > 0) {
                onOk(roomName);
            }
        }}>
      <Input placeholder="房间名称（选填）" autoFocus defaultValue={defaultValue} disabled={defaultValue !== ''} onChange={(e) => setRoomName(e.target.value)}/>
      <Card className="mt-6">
        <Card.Grid hoverable={false} className={styles.userlist}>
          <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
            选中全部
          </Checkbox>
          {members.map((v) => (<div className="my-4" key={v.user_id}>
              <Checkbox checked={checked(v)} disabled={disabled(v)} onChange={(e) => {
                if (e.target.checked) {
                    setAllowUserIds([...new Set(allowUserIds.concat(v.user_id))]);
                }
                else if (allowUserIds.includes(v.user_id)) {
                    setAllowUserIds(_.remove(allowUserIds, (a) => {
                        return a !== v.user_id;
                    }));
                }
            }}>
                <Space>
                  <Avatar src={v.avatar} size={28}/>
                  {v.user_name}
                </Space>
              </Checkbox>
            </div>))}
        </Card.Grid>
        <Card.Grid hoverable={false} className={styles.userlist}>
          <Space>
            已选择
            <span className="font-bold">{allowUserIds.length}</span>人
          </Space>
          {members
            .filter((s) => allowUserIds.includes(s.user_id))
            .map((v) => (<div className="my-4 flex items-center justify-between" key={v.user_id}>
                <Space>
                  <Avatar src={v.avatar} size={28}/>
                  {v.user_name}
                </Space>
                <IconFont icon="icon-close" className={styles.addRoomIcon} onClick={() => setAllowUserIds(allowUserIds.filter((a) => a !== v.user_id))}/>
              </div>))}
        </Card.Grid>
      </Card>
    </Modal>);
};
export default ChatModal;
//# sourceMappingURL=ChatModal.jsx.map