import { Card, Form } from "antd"
import React from "react"
import InputName from "@/components/InputName";
import { txtLength } from "@/utils/utils";
import New1Radio from "@/pages/launchSystemV3/components/New1Radio";
import { AD_STATUS_ENUM } from "../../const";


/**
 * 创意设置
 * @returns 
 */
const CreativeTemplateSetup: React.FC = () => {

    const validateString = (str: string) => {
        // 检查是否包含 '<' 或 '>'
        const hasAngleBrackets = str.includes('<') || str.includes('>');
        
        // 如果没有 '<' 和 '>'，直接返回 true
        if (!hasAngleBrackets) {
            return true;
        }
        // 正则表达式匹配成对的 <...>
        const pattern = /<([^<>]*)>/g;
        let match;
        const validValues = ["素材名称", "落地页", "文案"];

        // 匹配是否成对
        let strR = str.replaceAll(pattern, '')
        if (strR.includes('<') || strR.includes('>')) {
            return false
        }
        
        while ((match = pattern.exec(str)) !== null) {
            const content = match[1]; // 获取 <...> 内的内容
            // 检查内容是否为 "素材名称" 或 "落地页名"
            if (!validValues.includes(content)) {
                return false;
            }
        }
        return true;
    }

    return <Card
        title={< strong style={{ fontSize: 18 }}>创意设置</strong >}
        className="cardResetCss"
    >
        <Form.Item label={<strong>创意状态</strong>} name="configuredStatus" rules={[{ required: true, message: '请选择创意状态' }]}>
            <New1Radio data={Object.keys(AD_STATUS_ENUM).map(key => ({ label: AD_STATUS_ENUM[key as keyof typeof AD_STATUS_ENUM], value: key }))} />
        </Form.Item>
        <Form.Item
            label={<strong>创意名称</strong>}
            name='dynamicCreativeName'
            rules={[
                { required: true, message: '请输入创意名称!' },
                {
                    required: true, message: '创意名称不能包含特殊字符：< > & ‘ ” / 以及TAB、换行、回车键，请修改', validator(_, value) {
                        let reg = /[&‘’“”/\n\t\f]/ig
                        if (value && reg.test(value)) {
                            return Promise.reject()
                        }
                        if (!validateString(value)) {
                            return Promise.reject()
                        }
                        return Promise.resolve()
                    }
                },
                {
                    required: true, message: '请确保创意名称长度不超过60个字（1个汉字等于2个字符)', validator(_, value) {
                        if (value && txtLength(value) > 50) {
                            return Promise.reject()
                        }
                        return Promise.resolve()
                    }
                }
            ]}
        >
            <InputName placeholder='请输入创意名称' style={{ width: 480 }} length={50} isCurrent={['素材名称', '文案', '落地页']} />
        </Form.Item>
    </Card>
}

export default React.memo(CreativeTemplateSetup)