import TextAideInput from "@/pages/launchSystemNew/components/textAideInput"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"
import { Button, Collapse, Form, Modal } from "antd"
import React, { useEffect, useState } from "react"
import styles from './index.less'



interface Props {
    value?: any[]
    textData?: any[],
    sysAdcreative: any
    onChange?: (data: any) => void
}

/**
 * 文案设置
 * @returns 
 */
const Copywriting: React.FC<Props> = (props) => {

    /******************************/
    const { onChange, textData = [], sysAdcreative, value } = props
    const { adcreativeTemplateId } = sysAdcreative
    const [visible, setVisible] = useState<boolean>(false)
    const [form] = Form.useForm();
    /******************************/

    // 回填
    useEffect(() => {
        if (visible) {
            if (value && value?.length > 0) {
                form.setFieldsValue({ texts: value })
            } else {
                form.setFieldsValue({ texts: [undefined] })
            }
        }
    }, [value, visible])

    const handleOk = () => {
        form.validateFields().then(values => {
            console.log('values=>1', values)
            onChange && onChange(values?.texts)
            setVisible(false)
        })
    }

    return <>
        <span onClick={() => { setVisible(true) }}>{value && value?.length > 0 ? '编辑' : '添加'}</span>
        {visible && <Modal visible={visible} onCancel={() => setVisible(false)} title="创意文案" width={700} onOk={handleOk}>
            <Form name="dynamic_form_item" form={form} labelAlign='left' >
                <Form.List name="texts">
                    {(fields, { add, remove }) => (<>
                        <Collapse activeKey={fields.map(field => field.name)} bordered={false}>
                            {fields.map((field, num) => (<Collapse.Panel showArrow={false} header={`文案组${num + 1}`} key={(field.name).toString()} extra={fields?.length > 1 && <MinusCircleOutlined className={styles.clear} onClick={() => remove(field.name)} style={{ color: 'red' }} />}>
                                {textData?.map((item, index) => {
                                    if (item.name === 'title') {
                                        return <div key={'title' + item.fieldType}>
                                            <Form.Item {...field} label={<strong>{item.description}(选填)</strong>} name={[field.name, item.name]} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]}>
                                                <TextAideInput placeholder={'请输入' + item.description} style={{ width: 450 }} maxTextLength={item.restriction.textRestriction.maxLength} />
                                            </Form.Item>
                                        </div>
                                    }
                                    if (item.name === 'description') {
                                        let maxNum = adcreativeTemplateId === 1708 || adcreativeTemplateId === 1707 ? item.pupState.xd_show ? 10 : item.restriction.textRestriction.maxLength : item.restriction.textRestriction.maxLength
                                        return <div key={'description' + item.fieldType}>
                                            <Form.Item {...field} label={<strong>{item.description}</strong>} name={[field.name, item.name]} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
                                                <TextAideInput placeholder={'请输入' + item.description} style={{ width: 450 }} maxTextLength={maxNum} />
                                            </Form.Item>
                                        </div>
                                    }
                                    return null
                                })}
                            </Collapse.Panel>))}
                        </Collapse>
                        <Form.Item>
                            <Button type="link" onClick={() => add()} icon={<PlusOutlined />} style={{ padding: 0 }}>
                                新增文案组
                            </Button>
                        </Form.Item>
                    </>)}
                </Form.List>
            </Form>
        </Modal>}
    </>
}


export default React.memo(Copywriting)