import { useAjax } from "@/Hook/useAjax";
import { CreateAdProps } from "@/services/launchAdq/createAd";
import { addStrategyApi } from "@/services/launchAdq/localAd";
import { Button, Form, Input, message, Modal } from "antd"
import React, { useState } from "react"


interface Props {
    queryForm: Partial<CreateAdProps>
    accountCreateLogs: { adAccountId: number, id: number, userActionSetsList?: any[], productList?: any, conversionList?: any, customAudienceList?: any, excludedCustomAudienceList?: any, pageList?: any, coldStartAudienceList?: any[] }[]
    launchMode: number
}
/**
 * 存为策略组
 * @returns 
 */
const TacticsS: React.FC<Props> = ({ queryForm, accountCreateLogs, launchMode }) => {

    /*********************************/
    const [form] = Form.useForm();
    const [visible, setVisible] = useState<boolean>(false)

    const addStrategy = useAjax((params) => addStrategyApi(params))
    /*********************************/

    const seve = () => {
        setVisible(true)
    }

    const handleOk = () => {
        form.validateFields().then(values => {
            let strategyValue = JSON.stringify({
                queryForm,
                accountCreateLogs,
                launchMode
            })
            addStrategy.run({ ...values, strategyValue, promotedObjectType: queryForm.promotedObjectType }).then(res => {
                message.success('保存成功')
                form.resetFields()
                setVisible(false)
            })
        })
    }

    return <>
        <Button type='primary' onClick={seve}>存为策略组</Button>
        {visible && <Modal
            title="存为策略组"
            open={visible}
            onCancel={() => { form.resetFields(); setVisible(false) }}
            onOk={handleOk}
            confirmLoading={addStrategy.loading}
        >
            <Form
                form={form}
                layout='vertical'
                className='ad_form_style'
                colon={false}
                initialValues={{}}
            >
                <Form.Item label={<strong>策略组名称</strong>} name='strategyKey' rules={[{ required: true, message: '请输入策略组名称' }]}>
                    <Input placeholder="请输入策略组名称" showCount maxLength={30} />
                </Form.Item>
            </Form>
        </Modal>}
    </>
}

export default React.memo(TacticsS)