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


interface Props {
    value?: any[]
    textData?: any[],
    model?: 'cross' | 'corres',
    material?: {
        label: string;
        name: string;
        restriction: any;
        arrayProperty?: any;
    }[],
    sysAdcreative: any
    onChange?: (data: any) => void
}

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

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

    // 回填
    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
            open={visible}
            onCancel={() => setVisible(false)}
            title={<>
                <span>创意文案</span>
                {(texts && texts?.length > 1) && <Popconfirm
                    title="是否清空?"
                    onConfirm={() => form.setFieldsValue({ texts: [texts[0]] })}
                    okText="是"
                    cancelText="否"
                >
                    <Button type="link" danger>一键清空</Button>
                </Popconfirm>}
            </>}
            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={<Space>
                                    <span>{`文案组${num + 1}`}</span>
                                    <div className={styles.groups}>
                                        {material && material?.length >= num + 1 && model === 'corres' && [material[num]]?.map((item: any, index: number) => {
                                            let keys = Object.keys(item)
                                            if (keys?.includes('imageUrlList')) {
                                                return <div key={index} className={styles.group}>
                                                    {item?.imageUrlList?.map((url: string, index: number) => <div key={index}><img src={url} /></div>)}
                                                </div>
                                            } else if (keys?.includes('elementStory')) {
                                                return <div key={index} className={styles.group}>
                                                    {item?.elementStory?.map((item: { imageUrl: string }, index: number) => <div key={index}><img src={item.imageUrl} /></div>)}
                                                </div>
                                            } else {
                                                if (keys?.length > 1) {
                                                    return <div key={index} className={styles.otherGroup}>
                                                        {keys?.includes('imageUrl') && <div className={styles.group}><img src={item.imageUrl} /></div>}
                                                        {keys?.includes('videoUrl') && <div className={styles.group}><video src={item.videoUrl} /></div>}
                                                        {keys?.includes('shortVideo1Url') && <div className={styles.group}><video src={item.shortVideo1Url} /></div>}
                                                    </div>
                                                } else {
                                                    if (keys?.includes('imageUrl')) {
                                                        return <div key={index} className={styles.group}><img src={item.imageUrl} /></div>
                                                    } else if (keys?.includes('videoUrl')) {
                                                        return <div key={index} className={styles.group}><video src={item.videoUrl} /></div>
                                                    } else if (keys?.includes('shortVideo1Url')) {
                                                        return <div key={index} className={styles.group}><video src={item.shortVideo1Url} /></div>
                                                    }
                                                }
                                                return null
                                            }
                                        })}
                                    </div>
                                </Space>}
                                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={[{
                                                    required: true,
                                                    message: '请输入正确的' + item.description,
                                                    validator: (rule, value) => {
                                                        if (!value) {
                                                            return Promise.reject()
                                                        } else if (!value.match(RegExp(item.restriction.textRestriction.textPattern))) {
                                                            return Promise.reject()
                                                        } else if (txtLength(value) > item.restriction.textRestriction.maxLength) {
                                                            return Promise.reject()
                                                        }
                                                        return Promise.resolve()
                                                    }
                                                }]}>
                                                <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) && linkNameType ? 10 : 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, message: '请输入正确的' + item.description, validator: (rule, value) => {
                                                        if (!value) {
                                                            return Promise.reject()
                                                        } else if (!value.match(RegExp(item.restriction.textRestriction.textPattern))) {
                                                            return Promise.reject()
                                                        } else if (txtLength(value) > item.restriction.textRestriction.maxLength) {
                                                            return Promise.reject()
                                                        }
                                                        return Promise.resolve()
                                                        // pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`))
                                                    }
                                                }]}
                                            >
                                                <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)