import { useAjax } from "@/Hook/useAjax"
import { configHandleApi } from "@/services/gameData/adlist"
import { Form, Input, Modal, Radio, Select, message } from "antd"
import React from "react"

const validTimeEnum = [
    { label: '当日有效（自然日）', value: 1 },
    { label: '长期有效', value: 2 }
]

interface Props {
    initialValues?: any[]
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
const WhiteList: React.FC<Props> = ({ initialValues = [], visible, onClose, onChange }) => {

    /****************************/
    const [form] = Form.useForm()
    const configHandle = useAjax((params) => configHandleApi(params))
    /****************************/

    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        let regex = /[^,，]+/g;
        data.accountWhitelist = data.accountWhitelist.replace(/\s/g, "").match(regex)
        data.adWhitelist = data.adWhitelist.replace(/\s/g, "").match(regex)
        data.ids = initialValues.map(item => item.id)
        configHandle.run(data).then(res => {
            if (res) {
                message.success('修改成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={`${initialValues.map(item => item.ruleName).toString()} 添加规则白名单`}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={configHandle.loading}
    >
        <Form
            name="basicWhiteList"
            form={form}
            layout="vertical"
            autoComplete="off"
            colon={false}
            initialValues={initialValues.length === 1 ? { ...initialValues[0] } : {}}
        >
            <Form.Item label='账号白名单' name='accountWhitelist'>
                <Input.TextArea placeholder="请输入账号白名单(多个,隔开,a,b,c)" />
            </Form.Item>
            <Form.Item label='账号有效时长' name='accountValidTime'>
                <Select
                    showSearch
                    allowClear
                    placeholder={'请选择账号有效时长'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {validTimeEnum?.map((item: any) => <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>)}
                </Select>
            </Form.Item>
            <Form.Item label='广告白名单' name='adWhitelist'>
                <Input.TextArea placeholder="请输入广告白名单(多个,隔开,a,b,c)" />
            </Form.Item>
            <Form.Item label='广告有效时长' name='adValidTime'>
                <Select
                    showSearch
                    allowClear
                    placeholder={'请选择广告有效时长'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {validTimeEnum?.map((item: any) => <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>)}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(WhiteList)