import { Checkbox, DatePicker, Form, Input, InputNumber, Select } from "antd";
import React from "react";
import { ACTICITYTHEMEXH, DISPLAYTYPE } from "../../const";


/**
 * 模板消耗活动
 * @returns 
 */
const ConsumeActivityLinkDTO: React.FC<BOOKLINK.BookLinkChildProps> = ({ restField, name }) => {


    return <>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'activityName']}
            label={<strong>活动名称</strong>}
            rules={[{ required: true, message: '请输入活动名称!' }]}
        >
            <Input placeholder="请输入活动名称" style={{ width: '100%' }} allowClear />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'activityTheme']}
            label={<strong>活动主题</strong>}
            rules={[{ required: true, message: '请选择活动主题!' }]}
        >
            <Select
                showSearch
                placeholder="请选择活动主题"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                }
                allowClear
                options={Object.keys(ACTICITYTHEMEXH).map(key => ({ label: ACTICITYTHEMEXH[key], value: key }))}
            />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'unlockChapter']}
            label={<strong>购买章节数量</strong>}
            rules={[{ required: true, message: '请输入购买章节数量!' }]}
        >
            <InputNumber placeholder="请输入购买章节数量1-200" min={1} max={200} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'bookId']}
            label={<strong>书籍ID</strong>}
        >
            <Input placeholder="请输入书籍ID，不输入默认任意书籍" style={{ width: '100%' }} allowClear />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'giftAmount']}
            label={<strong>赠送书券数量</strong>}
            rules={[{ required: true, message: '请输入赠送书券数量!' }]}
        >
            <InputNumber placeholder="请输入赠送书券数量1-2000" min={1} max={2000} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'totalGift']}
            label={<strong>赠送名额</strong>}
            rules={[{ required: true, message: '请输入赠送名额!' }]}
        >
            <InputNumber placeholder="请输入赠送名额1-10000" min={1} max={10000} style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'activityTime']}
            label={<strong>活动时间</strong>}
            rules={[{ required: true, message: '请选择活动时间!' }]}
        >
            <DatePicker.RangePicker />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'consumeActivityLinkDTO', 'display']}
            label={<strong>活动展示位</strong>}
        >
            <Checkbox.Group options={Object.keys(DISPLAYTYPE).map(key => ({ label: DISPLAYTYPE[key], value: key }))} />
        </Form.Item>
    </>
}

export default React.memo(ConsumeActivityLinkDTO);