import { useAjax } from "@/Hook/useAjax"
import { syncComponentApi } from "@/services/adqV3/global"
import { DatePicker, Form, message, Modal } from "antd"
import { RangePickerProps } from "antd/lib/date-picker"
import React, { useState } from "react"
import moment from "moment"
import '../../tencentAdPutIn/index.less'

/**
 * 同步组件
 * @returns 
 */
const SyncCloudComponent: React.FC<{ onChange?: () => void, accountId: number }> = ({ onChange, accountId }) => {

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

    const syncComponent = useAjax((params) => syncComponentApi(params))
    const [visible, setVisible] = useState<boolean>(false)
    /********************************************/

    const handleOk = () => {
        form.validateFields().then(valid => {
            const { createTime, ...params } = valid
            syncComponent.run({ ...params, accountIds: [accountId], startTime: moment(createTime[0]).format('YYYY-MM-DD'), endTime: moment(createTime[1]).format('YYYY-MM-DD') }).then(res => {
                if (res) {
                    message.success('同步成功')
                    onChange?.()
                    setVisible(false)
                }
            })
        })
    }

    const disabledDate: RangePickerProps['disabledDate'] = current => {
        // 禁止选择当前日期之前的日期  
        return current && current > moment().endOf('day');
    };

    return <>
        <a onClick={() => setVisible(true)}>同步组件</a>
        {visible && <Modal
            title={<strong>同步组件</strong>}
            open={visible}
            onCancel={() => {
                setVisible(false)
            }}
            onOk={handleOk}
            className="modalResetCss"
            confirmLoading={syncComponent.loading}
            okText={'同步'}
        >
            <Form
                name="basicSyncCloudSc"
                form={form}
                layout='vertical'
                autoComplete="off"
                initialValues={{ type: 'image', createTime: [moment(), moment()] }}
            >
                <Form.Item
                    label={<strong>创建时间</strong>}
                    name="createTime"
                    rules={[
                        { required: true, message: '请选择创建时间' },
                        () => ({
                            validator(_, value) {
                                if (value) {
                                    const [startDate, endDate] = value;
                                    // 检查选择的日期范围是否超过30天  
                                    if (endDate.diff(startDate, 'days') >= 30) {
                                        return Promise.reject(new Error('选择的日期范围不能超过30天！'));
                                    }
                                }
                                return Promise.resolve();
                            },
                        })
                    ]}
                >
                    <DatePicker.RangePicker disabledDate={disabledDate} />
                </Form.Item>
            </Form>
        </Modal>}
    </>
}

export default React.memo(SyncCloudComponent)