import { useAjax } from '@/Hook/useAjax';
import { addLandingPageCustomerGroupApi, getLocalCorpCsgroupListAllApi, modifyLandingPageCustomerGroupApi } from '@/services/adqV3/global';
import { Form, message, Modal, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import '../../../../../tencentAdPutIn/index.less'
import SelectLandingPage from './selectLandingPage';

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

/**
 * 新增原生落地页与客服组关系
 * @param param0 
 * @returns 
 */
const AddLandingPageTieUp: React.FC<Props> = ({ adAccountId, initialValues, visible, onChange, onClose }) => {

    /*******************************************/
    const [form] = Form.useForm();
    const [groupList, setGroupList] = useState<{ label: string, value: number }[]>([])

    const addLandingPageCustomerGroup = useAjax((params) => addLandingPageCustomerGroupApi(params))
    const modifyLandingPageCustomerGroup = useAjax((params) => modifyLandingPageCustomerGroupApi(params))
    const getLocalCorpCsgroupListAll = useAjax((params) => getLocalCorpCsgroupListAllApi(params))
    // const getCorpListAll = useAjax(() => getCorpListAllApi())
    /*******************************************/


    useEffect(() => {
        getLocalCorpCsgroupListAll.run({ accountId: adAccountId }).then(res => {
            if (res && res.length > 0) {
                const list = res.map((item: { csgroupName: string; id: string; type: 0 | 1 }) => ({ label: item.csgroupName, value: item.id }))
                setGroupList(list)
            }
        })
    }, [])

    const handleOk = () => {
        form.validateFields().then(values => {
            if (initialValues?.pageId) {
                modifyLandingPageCustomerGroup.run({ ...values, pageId: initialValues.pageId, pageType: initialValues.pageType, accountId: adAccountId }).then((res) => {
                    if (res) {
                        message.success('修改成功')
                        onChange?.()
                    }
                })
            } else {
                addLandingPageCustomerGroup.run({ ...values, accountId: adAccountId }).then((res) => {
                    if (res) {
                        message.success('新增成功')
                        onChange?.()
                    }
                })
            }
        })
    };

    return <Modal
        title={<strong>{initialValues?.pageId ? '修改' : '新增'}官方落地页与客服组关系</strong>}
        open={visible}
        onOk={handleOk}
        onCancel={onClose}
        className='modalResetCss'
        confirmLoading={addLandingPageCustomerGroup.loading || modifyLandingPageCustomerGroup.loading}
        width={800}
    >
        <Form
            form={form}
            name='basicysWechatTieUp'
            autoComplete="off"
            colon={false}
            layout='vertical'
            initialValues={initialValues}
        >
            {!initialValues?.pageId && <Form.Item label={<strong>原生落地页</strong>} name="landingPageList" rules={[{ required: true, message: '请选择官方落地页!' }]}>
                <SelectLandingPage accountId={adAccountId} />
            </Form.Item>}
            <Form.Item label={<strong>本地客服组/集</strong>} name="localCsgroupId" rules={[{ required: !!initialValues?.pageId, message: '请选择本地客服组!' }]}>
                <Select
                    showSearch
                    placeholder="请选择客服组/集"
                    filterOption={(input, option) =>
                        ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                    }
                    allowClear
                    options={groupList}
                />
            </Form.Item>
        </Form>
    </Modal>;
};

export default React.memo(AddLandingPageTieUp);