import { Form, Input, message, Modal, Radio, Select } from "antd"
import React, { useEffect } from "react"
import '../../tencentAdPutIn/index.less'
import { useAjax } from "@/Hook/useAjax"
import { getAccountAllListApi } from "@/services/launchAdq/adAuthorize"
import { createAccountAssetsGroupApi, updateAccountAssetsGroupApi } from "@/services/adqV3/global"

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

/**
 * 新增修改账户组
 * @returns 
 */
const ModifyAccountGroup: React.FC<Props> = ({ initialValues, visible, onChange, onClose }) => {

    /******************************************/
    const [form] = Form.useForm()

    const getAccountAllList = useAjax(() => getAccountAllListApi())
    const createAccountAssetsGroup = useAjax((params) => createAccountAssetsGroupApi(params))
    const updateAccountAssetsGroup = useAjax((params) => updateAccountAssetsGroupApi(params))
    /******************************************/

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


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

        })
    }

    return <Modal
        title={<strong>{initialValues ? '账户资产共享组修改' : '账户资产共享组新增'}</strong>}
        open={visible}
        onCancel={onClose}
        className="modalResetCss"
        onOk={handleOk}
        confirmLoading={createAccountAssetsGroup.loading || updateAccountAssetsGroup.loading}
    >
        <Form
            name="basicModifyAccountGroup"
            form={form}
            layout='vertical'
            autoComplete="off"
            initialValues={initialValues || {
                authType: 'material'
            }}
        >
            <Form.Item label={<strong>账户资产共享组名称</strong>} name="accountGroupName" rules={[{ required: true, message: '请输入账户资产共享组名称!' }]}>
                <Input placeholder="请输入账户资产共享组名称" allowClear />
            </Form.Item>

            <Form.Item label={<strong>授权类型</strong>} name="authType" rules={[{ required: true, message: '请选择授权内容!' }]}>
                <Radio.Group buttonStyle="solid" disabled={initialValues}>
                    <Radio.Button value="material">素材</Radio.Button>
                    <Radio.Button value="conversion">转化归因</Radio.Button>
                    <Radio.Button value="wechatDownPage">原生落地页</Radio.Button>
                </Radio.Group>
            </Form.Item>

            <Form.Item
                label={<strong>授权主账户</strong>}
                name="authMainAccountId"
                rules={[{ required: true, message: '请选择授权主账户!' }]}
                tooltip="授权主户代表该账户组中的资产账户，主户中的相关资产会自动授权到所有子户中，会自动获取主户中的资产，可允许该账户组内的所有账户使用"
                help={<span style={{ fontSize: 12, color: 'red' }}>账户组生效依赖主账户必须至少存在1个视频1个图片，若主账户不满足条件请先主动上传。</span>}
            >
                <Select
                    disabled={initialValues}
                    filterOption={(input: any, option: any) => {
                        return option!.value?.toString().toLowerCase().includes(input.toLowerCase())
                    }}
                    showSearch
                    placeholder="请选择授权主账户"
                    options={getAccountAllList?.data?.filter((item: { adUnitAccount: boolean }) => !item?.adUnitAccount)?.map((item: { accountId: any }) => ({ label: item.accountId, value: item.accountId }))}
                />
            </Form.Item>
        </Form>
    </Modal>
}


export default React.memo(ModifyAccountGroup)