import { useAjax } from "@/Hook/useAjax"
import { addCorpWechatApi, getLocalCorpListApi, modifyCorpWechatApi } from "@/services/adqV3/global"
import { Form, Input, message, Modal, Select } from "antd"
import React, { useEffect } from "react"
import '../../../tencentAdPutIn/index.less'


interface Props {
    value?: { agentId: number, corpName: string, localCorpId: string, tencentCorpId: string }
    visible?: boolean
    onChange?: () => void
    onClose?: () => void
}

/**
 * 新增企业微信
 * @returns 
 */
const Modify: React.FC<Props> = ({ value, visible, onChange, onClose }) => {

    /********************************/
    const [form] = Form.useForm()
    const corp = Form.useWatch('corp', form)
    const addCorpWechat = useAjax((params) => addCorpWechatApi(params))
    const modifyCorpWechat = useAjax((params) => modifyCorpWechatApi(params))
    const getLocalCorpList = useAjax(() => getLocalCorpListApi())
    /********************************/

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

    const handleOk = () => {
        form.validateFields().then(valid => {
            console.log(valid)
            const { corp, ...params } = valid
            const [corpName, localCorpId] = corp.split('&&')

            if (value && Object.keys(value).length) {
                modifyCorpWechat.run({ ...params, corpName, localCorpId }).then(res => {
                    if (res) {
                        message.success('修改成功')
                        onChange?.()
                    }
                })
            } else {
                addCorpWechat.run({ ...params, corpName, localCorpId }).then(res => {
                    if (res) {
                        message.success('新增成功')
                        onChange?.()
                    }
                })
            }
        })
    }

    return <Modal
        title={<strong>{`新增企业微信`}</strong>}
        open={visible}
        onCancel={onClose}
        onOk={handleOk}
        className="modalResetCss"
        confirmLoading={addCorpWechat.loading}
    >
        <Form
            name="basicMiniProgramWechat"
            form={form}
            layout='vertical'
            autoComplete="off"
            initialValues={value}
        >
            <Form.Item label={<strong>企业微信</strong>} name="corp" rules={[{ required: true, message: '请输入企业微信名称!' }]}>
                <Select
                    placeholder='请选择企业微信'
                    allowClear
                    showSearch
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    options={getLocalCorpList?.data?.map((item: { corpName: string; corpId: string }) => ({ label: item.corpName, value: item.corpName + '&&' + item.corpId }))}
                />
            </Form.Item>
            {corp && <>
                <Form.Item
                    label={<strong>企业微信ID（广告创建使用）</strong>}
                    name="tencentCorpId"
                    rules={[
                        { required: true, message: '请输入企业微信ID!' }
                    ]}
                >
                    <Input placeholder="请输入企业微信ID" allowClear disabled={value && Object.keys(value).length > 0} />
                </Form.Item>
                <Form.Item
                    label={<strong>腾讯广告第三方企微应用ID</strong>}
                    name="agentId"
                    rules={[
                        { required: true, message: '请输入腾讯广告第三方企微应用ID!' }
                    ]}
                >
                    <Input placeholder="请输入腾讯广告第三方企微应用ID" allowClear />
                </Form.Item>
            </>}
        </Form>
    </Modal>
}

export default React.memo(Modify)