import { Form, Modal } from "antd"
import React, { useEffect } from "react"
import { TextEditor } from "../textEditor"


interface Props {
    visible?: boolean
    onChange?: (value?: string) => void
    value?: string
    onClose?: () => void
}
/**
 * 新增文案
 * @returns 
 */
const TextModal: React.FC<Props> = ({ visible, onChange, value, onClose }) => {

    /**************************/
    const [form] = Form.useForm();
    /**************************/

    useEffect(() => {
        if (value) {
            form.setFieldsValue({ text: value })
        }
    }, [value])

    const handleOk = () => {
        form.validateFields().then(values => {
            console.log(values)
            const newText = values?.text
            onChange?.(newText.replace(/\s(?=%)/g, '').replace(/(?<=%)\s/g, ''))
        })
    }

    return <Modal
        open={visible}
        width={500}
        title={'文本内容'}
        onOk={handleOk}
        onCancel={() => { onClose?.() }}
        destroyOnClose={true}
    >
        <Form
            form={form}
            initialValues={{}}
        >
            <Form.Item name="text" rules={[{ required: true, message: '请输入文案!' }]}>
                <TextEditor />
            </Form.Item>
        </Form>

    </Modal>
}


export default React.memo(TextModal)