import { useAjax } from '@/Hook/useAjax';
import { addProjectToGroupApi } from '@/pages/weComTask/API/businessPlan/create';
import { addProjectToGroupPullApi } from '@/pages/weComTask/API/groupChat';
import { getProjectGroupsAllListApi } from '@/pages/weComTask/API/groupManage';
import { App, Form, Modal, Select } from 'antd';
import React, { useEffect } from 'react';

interface AddToGroupProps {
    data: any[];
    isPull?: boolean;
    visible?: boolean;
    onClose?: () => void;
    onChange?: () => void;
}

/**
 * 加入项目组
 * @param param0 
 * @returns 
 */
const AddToGroup: React.FC<AddToGroupProps> = ({ data, isPull = false, visible, onClose, onChange }) => {

    /****************************************/
    const { message } = App.useApp()
    const [form] = Form.useForm();
    const getProjectGroupsAllList = useAjax(() => getProjectGroupsAllListApi())
    const addProjectToGroup = useAjax((params) => addProjectToGroupApi(params)) // 群发
    const addProjectToGroupPull = useAjax((params) => addProjectToGroupPullApi(params)) // 拉群
    /****************************************/

    useEffect(() => {
        getProjectGroupsAllList.run()
    }, [])

    const handleOk = () => {
        form.validateFields().then((values) => {
            if (isPull) {
                addProjectToGroupPull.run({ ...values, projectIds: data.map(item => item.id) }).then((res) => {
                if (res?.data) {
                    message.success('添加成功')
                    onChange?.()
                }
            })
            } else {
                addProjectToGroup.run({ ...values, projectIds: data.map(item => item.id) }).then((res) => {
                    if (res?.data) {
                        message.success('添加成功')
                        onChange?.()
                    }
                })
            }

        }).catch((err) => {
            console.log('err', err)
            form.submit()
        });
    }

    return <Modal
        title={<strong>加入到项目组</strong>}
        open={visible}
        onCancel={onClose}
        width={500}
        onOk={handleOk}
        confirmLoading={addProjectToGroup.loading || addProjectToGroupPull.loading}
    >
        <Form
            form={form}
            name="addToGRoup"
            labelAlign='left'
            labelCol={{ span: 5 }}
            colon={false}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            preserve={true}
        >
            <Form.Item label={<strong>项目组名称</strong>} name="groupId" rules={[{ required: true, message: '请选择项目组!' }]}>
                <Select
                    showSearch
                    allowClear
                    placeholder="请选择项目组"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                    }
                    options={getProjectGroupsAllList?.data?.data?.map((item: any) => ({ label: item.name, value: item.id }))}
                    loading={getProjectGroupsAllList.loading}
                />
            </Form.Item>
        </Form>
    </Modal>
};

export default AddToGroup;