import { Button, Card, Checkbox, DatePicker, Form, Input, InputNumber, message, Modal, Radio, Space } from "antd"
import React, { useState } from "react"
import moment from "moment"
import { randomString } from "@/utils/utils"
import { RangePickerProps } from "antd/lib/date-picker"

/**
 * 设置名称
 * @returns 
 */
interface Props {
    visible?: boolean,
    onClose?: () => void,
    onChange?: (data: any) => void
    ajax?: any
}
const SubmitModal: React.FC<Props> = (props) => {

    /********************/
    const { visible, onClose, onChange, ajax } = props
    const [form] = Form.useForm()
    const submitRule = Form.useWatch('submitRule', form)

    const handleOk = (values: any) => {
        let params = JSON.parse(JSON.stringify(values))
        if (params?.submitStartTime) {
            params.submitStartTime = moment(params.submitStartTime).format('YYYY-MM-DD HH:mm:ss')
        }
        if (params?.submitInterval) {
            params.submitInterval = params.submitInterval * 60
        }
        onChange?.(params)
    }


    const disabledDate: RangePickerProps['disabledDate'] = current => {
        // Can not select days before today and today
        return current && current <= moment().startOf('day');
    };

    return <Modal
        title={<strong style={{ fontSize: 20 }}>提交</strong>}
        className="modalResetCss"
        open={visible}
        confirmLoading={ajax?.loading}
        footer={null}
        onCancel={onClose}
        bodyStyle={{ padding: '0 0 40px', position: 'relative', borderRadius: '0 0 8px 8px' }}
        maskClosable={false}
        width={700}
    >
        <Form
            name="basicSubmit"
            form={form}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            autoComplete="off"
            style={{ backgroundColor: '#f1f4fc', maxHeight: 650, overflow: 'hidden', overflowY: 'auto', padding: '10px', borderRadius: '0 0 8px 8px' }}
            scrollToFirstError={{
                behavior: 'smooth',
                block: 'center'
            }}
            onFinishFailed={({ errorFields }) => {
                message.error(errorFields?.[0]?.errors?.[0])
            }}
            onFinish={handleOk}
            colon={false}
            labelAlign="left"
            initialValues={{
                taskName: '任务' + moment().format('MMDDHHmmss') + '_' + randomString(true, 3, 5),
                submitRule: 0,
                submitType: 1,
                submitByMultiMediaAccount: false
            }}
        >
            <Card
                title={<strong style={{ fontSize: 18 }}>提交配置</strong>}
                className="cardResetCss"
            >
                <Form.Item label={<strong>提交规则</strong>} name="submitRule" rules={[{ required: true, message: '请选择提交规则!' }]}>
                    <Radio.Group buttonStyle="solid">
                        <Radio.Button value={0}>默认(立即提交)</Radio.Button>
                        <Radio.Button value={1}>立即提交</Radio.Button>
                        <Radio.Button value={2}>定时提交</Radio.Button>
                        <Radio.Button value={3}>分批次提交</Radio.Button>
                    </Radio.Group>
                </Form.Item>

                {[2, 3].includes(submitRule) && <>
                    <Form.Item
                        label={<strong>开始提交时间</strong>}
                        name="submitStartTime"
                        rules={[
                            { required: true, message: '请选择开始提交时间!' },
                            () => ({
                                validator(_, value) {
                                    if (value && moment().add(10, 'minutes') > value) {
                                        return Promise.reject(new Error('开始提交时间必须大于10分钟后'));
                                    }
                                    return Promise.resolve();
                                },
                            })
                        ]}
                    >
                        <DatePicker showTime disabledDate={disabledDate} />
                    </Form.Item>
                </>}
                {submitRule === 3 ? <>
                    <Form.Item label={<strong>分批提交类型</strong>} name="submitType" rules={[{ required: true, message: '请选择分批提交类型!' }]}>
                        <Radio.Group buttonStyle="solid">
                            <Radio.Button value={1}>分批提交广告</Radio.Button>
                            {/* <Radio.Button value={2}>分批提交创意</Radio.Button> */}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label={<strong>每次提交时间间隔</strong>} required tooltip="是否多媒体账户提交（true false） 多媒体账户提交- 如果是true，5个账户10条广告中,每个账户的第一条广告都要执行 如果是false ,5个账户10个广告,10个广告依次按照时间间隔执行">
                        <Space>
                            <Form.Item name="submitInterval" rules={[{ required: true, message: '请输入每次提交时间间隔!' }]} noStyle>
                                <InputNumber addonAfter={'分钟'} min={10} max={1440} style={{ width: 250 }} placeholder="请输入每次提交时间间隔" />
                            </Form.Item>
                            <Form.Item name="submitByMultiMediaAccount" noStyle valuePropName="checked">
                                <Checkbox>是否多媒体账户提交</Checkbox>
                            </Form.Item>
                        </Space>
                    </Form.Item>
                    <Form.Item label={<strong>每批次提交数</strong>} name="submitAdNum" rules={[{ required: true, message: '请输入每批次提交数!' }]}>
                        <InputNumber min={1} style={{ width: 250 }} placeholder="请输入每批次提交数" />
                    </Form.Item>
                </> : null}

                <Form.Item label={<strong>任务名称</strong>} name="taskName" rules={[{ required: true, message: '请输入任务名称!' }]}>
                    <Input placeholder="请输入任务名称" />
                </Form.Item>
            </Card>

            <Form.Item className="submit_pull" wrapperCol={{ span: 24 }}>
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" htmlType="submit" loading={ajax?.loading} className="modalResetCss">
                        确定
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(SubmitModal)