import { DatePicker, Form, Input, Radio } from "antd";
import React from "react";
import SetConfig from "./setConfig";
import { RangePickerProps } from "antd/es/date-picker";
import dayjs from 'dayjs';


/**
 * 文鼎充值活动
 * @returns 
 */
const RechargeActivityLinkDTO: React.FC<BOOKLINK.BookLinkChildProps> = ({ restField, name }) => {

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

    return <>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'activityName']}
            label={<strong>活动名称</strong>}
            rules={[{ required: true, message: '请输入活动名称!' }]}
        >
            <Input placeholder="请输入活动名称" style={{ width: '100%' }} allowClear />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'viewTitle']}
            label={<strong>活动页标题</strong>}
            rules={[{ required: true, message: '请输入活动页标题!' }]}
        >
            <Input placeholder="请输入活动页标题" style={{ width: '100%' }} allowClear />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'configs']}
            label={<strong>活动充值项</strong>}
            rules={[{ required: true, message: '请添加活动充值项!' }]}
        >
            <SetConfig />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'activityTime']}
            label={<strong>活动时间</strong>}
            rules={[{ required: true, message: '请选择活动时间!' }]}
        >
            <DatePicker.RangePicker disabledDate={disabledDate} />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'hideCountDown']}
            label={<strong>活动倒计时</strong>}
            rules={[{ required: true, message: '请选择是否显示活动倒计时!' }]}
        >
            <Radio.Group
                optionType='button'
                buttonStyle="solid"
                options={[
                    { value: 1, label: '隐藏' },
                    { value: 0, label: '显示' }
                ]}
            />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'userGroup']}
            label={<strong>目标用户</strong>}
            rules={[{ required: true, message: '请选择目标用户!' }]}
        >
            <Radio.Group
                optionType='button'
                buttonStyle="solid"
                options={[
                    { value: 0, label: '全部用户' },
                    { value: 10, label: '标签用户' }
                ]}
            />
        </Form.Item>
    </>
}

export default React.memo(RechargeActivityLinkDTO);