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


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

    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', '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(ACTICITYTHEME).map(key => ({ label: ACTICITYTHEME[key], value: key }))}
            />
        </Form.Item>
        <Form.Item
            label={<strong>充值档位</strong>}
            required
        >
            <Space>
                <Form.Item
                    {...restField}
                    name={[name, 'rechargeActivityLinkDTO', 'rechargeAmount']}
                    rules={[{ required: true, message: '请输入价位!' }]}
                    noStyle
                >
                    <InputNumber addonBefore="价位" suffix="元" placeholder="请输入" style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item
                    {...restField}
                    name={[name, 'rechargeActivityLinkDTO', 'giftAmount']}
                    rules={[{ required: true, message: '请输入送券数量!' }]}
                    noStyle
                >
                    <InputNumber addonBefore="赠送" suffix="书卷" placeholder="请输入" style={{ width: '100%' }} />
                </Form.Item>
            </Space>
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'rechargeCount']}
            label={<strong>充值次数</strong>}
            rules={[{ required: true, message: '请选择充值次数!' }]}
        >
            <Select
                showSearch
                placeholder="请选择充值次数"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
                }
                allowClear
                options={[1, 2, 3].map(key => ({ label: key + '次', value: key }))}
            />
        </Form.Item>
        {itemData?.rechargeActivityLinkDTO?.rechargeCount === 1 && <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'isDayRepeat']}
            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', 'activityTime']}
            label={<strong>活动时间</strong>}
            rules={[{ required: true, message: '请选择活动时间!' }]}
        >
            <DatePicker.RangePicker />
        </Form.Item>
        <Form.Item
            {...restField}
            name={[name, 'rechargeActivityLinkDTO', 'timeIsShow']}
            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', 'display']}
            label={<strong>活动展示位</strong>}
        >
            <Checkbox.Group options={Object.keys(DISPLAYTYPE).map(key => ({ label: DISPLAYTYPE[key], value: key }))} />
        </Form.Item>

    </>
}

export default React.memo(RechargeActivityLinkDTO);