import React from 'react';
import '../../../../../tencentAdPutIn/index.less'
import { Form, Input, message, Modal, Select } from 'antd';
import { useAjax } from '@/Hook/useAjax';
import { addTencentCorpCsgroupApi } from '@/services/adqV3/global';
import SelectKF from './selectKF';

interface AddCsGroupProps {
    corpWechatList: { label: string; value: string }[];
    adAccountId?: number; // 广告账号ID
    visible?: boolean;
    onClose?: () => void;
    onChange?: () => void;
    initialValues?: any; // 用于表单的初始值
}
const AddTencentGroup: React.FC<AddCsGroupProps> = ({ corpWechatList, adAccountId, visible, onClose, onChange, initialValues }) => {

    /**************************************/
    const [form] = Form.useForm();
    const tencentCorpId = Form.useWatch('tencentCorpId', form);

    const addTencentCorpCsgroup = useAjax((params) => addTencentCorpCsgroupApi(params))
    /**************************************/

    const handleOk = () => {
        form.validateFields().then(values => {
            const { tencentCorpUserIds, ...params } = values;
            addTencentCorpCsgroup.run({ ...params, accountId: adAccountId, tencentCorpUserIds: tencentCorpUserIds.map((item: { userId: any; }) => item.userId) }).then((res) => {
                if (res) {
                    message.success('新增成功')
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={<strong>新增客服组</strong>}
        open={visible}
        onOk={handleOk}
        onCancel={onClose}
        className='modalResetCss'
        confirmLoading={addTencentCorpCsgroup.loading}
        width={550}
    >
        <Form
            form={form}
            name='basicAddGroup'
            autoComplete="off"
            colon={false}
            labelCol={{ span: 5 }}
            labelAlign='left'
            initialValues={initialValues} // 默认类型为客服组
        >
            <Form.Item label={<strong>客服组名称</strong>} name="groupName" rules={[{ required: true, message: `请输入客服组名称!` }]}>
                <Input placeholder={`请输入客服组名称`} />
            </Form.Item>
            <Form.Item label={<strong>腾讯企业</strong>} name="tencentCorpId" rules={[{ required: true, message: '请选择腾讯企业!' }]}>
                <Select
                    showSearch
                    placeholder="请选择企业"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    allowClear
                    options={corpWechatList}
                />
            </Form.Item>
            {tencentCorpId && <Form.Item label={<strong>客服</strong>} name="tencentCorpUserIds" rules={[{ required: true, message: '请选择客服!' }]}>
                <SelectKF
                    data={corpWechatList.find(item => item.value === tencentCorpId) as any}
                    adAccountId={adAccountId as number}
                />
            </Form.Item>}
        </Form>
    </Modal>
};

export default React.memo(AddTencentGroup);