import { useAjax } from "@/Hook/useAjax"
import { addWechatAppletApi, updateWechatAppletApi } from "@/services/adqV3/global"
import { Form, Input, message, Modal } from "antd"
import React from "react"
import '../../tencentAdPutIn/index.less'


interface Props {
    visible?: boolean
    onChange?: () => void
    onClose?: () => void,
    initialValues?: any
}

/**
 * 新增微信小程序
 * @returns 
 */
const Modify: React.FC<Props> = ({ visible, onChange, onClose, initialValues }) => {

    /********************************/
    const [form] = Form.useForm()
    const addWechatApplet = useAjax((params) => addWechatAppletApi(params))
    const updateWechatApplet = useAjax((params) => updateWechatAppletApi(params))
    /********************************/

    const handleOk = () => {
        form.validateFields().then(valid => {
            console.log(valid)
            if (initialValues?.id) {
                updateWechatApplet.run({ ...valid, id: initialValues.id }).then(res => {
                    if (res) {
                        message.success('修改成功')
                        onChange?.()
                    }
                })
            } else {
                addWechatApplet.run(valid).then(res => {
                    if (res) {
                        message.success('新增成功')
                        onChange?.()
                    }
                })
            }
        })
    }

    return <Modal
        title={<strong>{`新增微信小程序`}</strong>}
        open={visible}
        onCancel={onClose}
        onOk={handleOk}
        className="modalResetCss"
        confirmLoading={addWechatApplet.loading || updateWechatApplet.loading}
    >
        <Form
            name="basicMiniProgramWechat"
            form={form}
            layout='vertical'
            autoComplete="off"
            initialValues={{ ...initialValues }}
        >
            <Form.Item label={<strong>微信小程序名称</strong>} name="appletName" rules={[{ required: true, message: '请输入微信小程序名称!' }]}>
                <Input placeholder="请输入微信小程序名称" allowClear />
            </Form.Item>
            <Form.Item 
                label={<strong>微信小程序原生ID</strong>} 
                name="appletId" 
                rules={[
                    { required: true, message: '请输入微信小程序原生ID!' },
                    {
                        required: true, message: '微信小程序原生ID以gh_开头，请修改', validator(_, value) {
                            let reg = /^gh_/i
                            if (!(value && reg.test(value))) {
                                return Promise.reject()
                            }
                            return Promise.resolve()
                        }
                    }
                ]}
            >
                <Input placeholder="请输入微信小程序原生ID(gh_开头)" allowClear />
            </Form.Item>
            <Form.Item label={<strong>微信小程序路径</strong>} name="appletLink" rules={[{ required: true, message: '请输入微信小程序路径!' }]}>
                <Input placeholder="请输入微信小程序路径(pages/index/index)" />
            </Form.Item>
            <Form.Item label={<strong>详细描述</strong>} name="description">
                <Input.TextArea placeholder="请输入详细描述" maxLength={120} allowClear />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(Modify)