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';

type PropType = {
  visible: boolean;
  setVisible: (visible: boolean) => void;
  onCheckAllChange: (e: any) => void;
  indeterminate: boolean;
  checkAll: boolean;
  allowUserIds: string[];
  setAllowUserIds: (allowUserIds: string[]) => void;
  onOk: (roomName: string) => void;
  checked: (v: any) => boolean;
  disabled: (v: any) => boolean;
  title: string;
  okText: string;
  defaultValue: string;
  members: any[];
};
const ChatModal: React.FC<PropType> = ({
  visible,
  setVisible,
  onCheckAllChange,
  indeterminate,
  checkAll,
  allowUserIds,
  setAllowUserIds,
  onOk,
  disabled,
  checked,
  title,
  okText,
  defaultValue,
  members,
}) => {
  const [roomName, setRoomName] = useState<string>('');

  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;