import { useAjax } from '@/Hook/useAjax';
import React, { useEffect, useState } from 'react';
import { ApiParamsChatListProps, getGroupChatListApi } from '../global';
import { App, Button, Flex, Input, Modal, Table, Typography } from 'antd';
const { Text } = Typography;

interface SelectGroupChatProps {
    corpId: string;
    value?: { chatId: string; chatName: string, corpName: string, corpId: string };
    onChange?: (value?: { chatId: string; chatName: string, corpName: string, corpId: string }) => void;
}

/**
 * 选择群
 * @param param0 
 * @returns 
 */
const SelectGroupChat: React.FC<SelectGroupChatProps> = ({ corpId, value, onChange }) => {

    /****************************************/
    const { message } = App.useApp();
    const [queryParams, setQueryParams] = useState<ApiParamsChatListProps>({
        corpId,
        pageNum: 1,
        pageSize: 20,
    });
    const [visible, setVisible] = useState<boolean>(false);
    const [selectedRows, setselectedRows] = useState<any[]>([])

    const getGroupChatList = useAjax((params) => getGroupChatListApi(params))
    /****************************************/

    useEffect(() => {
        if (value) {
            setselectedRows([{ chatId: value.chatId, chatName: value.chatName, corpId: value.corpId, corpName: value.corpName }]);
        }
    }, [value])

    useEffect(() => {
        if (visible) {
            getGroupChatList.run({ ...queryParams, corpId })
        }
    }, [visible, queryParams]);

    const handleOk = () => {
        if (selectedRows?.length) {
            onChange?.({ chatId: selectedRows[0]?.chatId, chatName: selectedRows[0]?.chatName, corpId: selectedRows[0]?.corpId, corpName: selectedRows[0]?.corpName });
            setVisible(false);
        } else {
            message.error('请选择群聊');
        }
    };

    return <Flex gap={10} align='center'>
        {value?.chatId && <div style={{ maxWidth: 'calc(100% - 90px)', overflow: 'hidden' }}><Text ellipsis>{value?.chatName || value?.chatId}</Text></div>}
        <Button type="primary" onClick={() => setVisible(true)}>选择素材群</Button>
        {visible && <Modal
            title={<strong>选择素材群</strong>}
            open={visible}
            onCancel={() => setVisible(false)}
            onOk={handleOk}
        >
            <Input.Search placeholder="请输入群名称" onSearch={(value) => { setQueryParams({ ...queryParams, chatName: value, pageNum: 1 }); }} allowClear style={{ marginBottom: 10, width: 250 }} />

            <Table
                columns={[
                    {
                        title: '群名称',
                        dataIndex: 'chatName',
                        key: 'chatName',
                        render: (text: string, record: any) => <span>{text || record?.chatId || '--'}</span>,
                    }
                ]}
                scroll={{ y: 400 }}
                bordered
                dataSource={getGroupChatList.data?.data?.records}
                rowKey="chatId"
                pagination={{
                    total: getGroupChatList.data?.data?.total,
                    current: getGroupChatList?.data?.data?.current || 1,
                    pageSize: getGroupChatList?.data?.data?.size || 20,
                    onChange: (page: number, pageSize: number) => {
                        setQueryParams({ ...queryParams, pageNum: page, pageSize })
                    }
                }}
                rowSelection={{
                    selectedRowKeys: selectedRows?.map((item: any) => item?.chatId),
                    type: 'radio',
                    onChange(_, selectedRows) {
                        console.log(selectedRows)
                        setselectedRows(selectedRows)
                    },
                }}
            />

        </Modal>}
    </Flex>;
};

export default SelectGroupChat;