import { DatePicker, Form, Input, Modal, Radio, Select, Space, TimePicker, message } from "antd"
import { RangePickerProps } from "antd/lib/date-picker"
import React from "react"
import moment from "moment"
import { sendMsgTaskApi } from "@/services/gameData/roleOperate"
import { useAjax } from "@/Hook/useAjax"

interface Props {
    roleRechargeRankingDTO: any
    roleIds: any[],
    gameId: number,
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}

/**
 * 新建游戏内消息推送
 * @param param0 
 * @returns 
 */
const MsgPushModal: React.FC<Props> = ({ visible, onClose, onChange, roleRechargeRankingDTO, roleIds, gameId }) => {

    /*************************/
    const [form] = Form.useForm()
    // const sendWay = Form.useWatch('sendWay', form)
    // const startDate = Form.useWatch('startDate', form);
    // const endDate = Form.useWatch('endDate', form);
    const sendMsgTask = useAjax((params) => sendMsgTaskApi(params))
    /*************************/

    const handleOk = async () => {
        let validate = await form.validateFields()
        let params = { ...validate, roleRechargeRankingDTO, roleIds, gameId }
        console.log(params)
        sendMsgTask.run(params).then(res => {
            if (res) {
                message.success('提交成功')
                onChange?.()
            }
        })
    }

    // const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    //     return current && current < moment().startOf('days');
    // };

    // const disabledStartDate: RangePickerProps['disabledDate'] = (current) => {
    //     if (endDate) {
    //         return current && (current < moment().startOf('days') || current > moment(endDate).endOf('days'));
    //     }
    //     return current && current < moment().startOf('days');
    // };

    // const disabledEndDate: RangePickerProps['disabledDate'] = (current) => {
    //     if (startDate) {
    //         return current && current < moment(startDate).startOf('days');
    //     }
    //     return current && current < moment().startOf('days');
    // };

    return <Modal
        title='游戏内消息推送'
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={sendMsgTask.loading}
    >
        <Form
            name="basicMsgPush"
            form={form}
            autoComplete="off"
            initialValues={{ sendWay: 0 }}
            layout="vertical"
        >
            <Form.Item
                label={<strong>任务标题</strong>}
                name="taskName"
                rules={[{ required: true, message: '请输入任务标题' }]}
            >
                <Input placeholder="请输入任务标题" />
            </Form.Item>
            {/* <Form.Item
                label={<strong>发送类型</strong>}
                name="sendWay"
                rules={[{ required: true, message: '请选择发送类型' }]}
            >
                <Radio.Group
                    options={[{ label: '立即发送', value: 0 }, { label: '定时发送', value: 1 }, { label: '每日循环', value: 2 }]}
                    optionType="button"
                    buttonStyle="solid"
                />
            </Form.Item>
            {sendWay === 1 ? <Form.Item
                label={<strong>发送时间</strong>}
                name="sendTime"
                rules={[{ required: true, message: '请选择发送时间' }]}
            >
                <DatePicker disabledDate={disabledDate} showTime />
            </Form.Item> : sendWay === 2 ? <>
                <Form.Item
                    label={<strong>发送日期</strong>}
                    required
                >
                    <Space>
                        <Form.Item name='startDate' rules={[{ required: true, message: '请选择开始日期' }]} noStyle>
                            <DatePicker disabledDate={disabledStartDate} placeholder={'开始时间'} />
                        </Form.Item>
                        <span>-</span>
                        <Form.Item name='endDate' noStyle>
                            <DatePicker disabledDate={disabledEndDate} placeholder={'结束日期'} />
                        </Form.Item>
                    </Space>
                </Form.Item>
                <Form.Item
                    label={<strong>发送时间</strong>}
                    name="sendTime"
                    rules={[{ required: true, message: '请选择发送时间' }]}
                >
                    <TimePicker />
                </Form.Item>
            </> : null} */}
            <Form.Item
                label={<strong>群发内容 <span style={{ color: 'red' }}>禁止使用下划线</span></strong>}
                name='sendContent'
                rules={[{ required: true, message: '请输入文本内容' }]}
            >
                <Input.TextArea
                    placeholder="请输入文本内容"
                    maxLength={500}
                    showCount
                    autoSize={{ minRows: 8 }}
                />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(MsgPushModal)