import { Radio, Space } from "antd"
import React, { useEffect, useState } from "react"
import { TextEditor } from "@/pages/weComTask/components/textEditor"
import MaterialMould from "@/pages/weComTask/components/materialMould"

interface Props {
    value?: TASK_CREATE.ContentDTOProps
    onChange?: (value?: TASK_CREATE.ContentDTOProps) => void
}

const types = [
    { label: '图片', value: 'image' },
    { label: '视频', value: 'video' },
    { label: '音频', value: 'voice' },
    { label: '链接', value: 'link' },
    { label: '小程序', value: 'miniprogram' },
    { label: '文件', value: 'file' },
]
const mediaSizeObj = {
    'image': {
        size: 10 * 1024 * 1024,
        evalS: '>',
        width: 1440,
        evalW: '>',
        height: 1080,
        evalH: '>',
        msg: '朋友圈类型图片不超过1440 x 1080,10MB，支持JPG,PNG格式!'
    },
    'video': {
        size: 10 * 1024 * 1024,
        evalS: '>',
        duration: 30,
        evalD: '>',
        msg: '朋友圈类型视频时长不超过30秒，10MB，支持MP4格式!'
    },
}

/**
 * 朋友圈内容设置
 * @returns 
 */
const MaterialFriendsNoTextMould: React.FC<Props> = ({ onChange, value }) => {

    /***************************************/
    const [type, setType] = useState<'text' | 'video' | 'file' | 'link' | 'voice' | 'miniprogram' | 'image'>('image')//当前选择的素材类型
    const [dataNum, setDataNum] = useState<any>(9)
    const [noShowType, setNoShowType] = useState<any[]>(['video', 'voice', 'link', 'miniprogram', 'file'])//不可选的素材
    const [textContent, setTextContent] = useState<string>()
    const [attachmentList, setAttachmentList] = useState<any>()
    /***************************************/
    
    /** 回填 */
    useEffect(() => {
        if (value) {
            if (value?.text?.content && !textContent) {
                const newValue = value?.text?.content
                setTextContent(newValue)
            }
            if (value?.attachmentList && value?.attachmentList?.length > 0 && !attachmentList) {
                const newAttachmentList: any = value?.attachmentList
                const newType = newAttachmentList?.[0]?.mediaType || 'image'
                setType(newType)
                setAttachmentList(newAttachmentList)
            }
        }
    }, [value, textContent, attachmentList])

    /** 返回 */
    const handleChange = (textContent: any, attachmentList?: any) => {
        let newAttachmentList: TASK_CREATE.Attachment[] = []
        let text: any = {}
        if (textContent) {
            text = {
                content: textContent
            }
        }
        if (attachmentList && attachmentList?.length > 0) {
            newAttachmentList = attachmentList
        }
        if (text?.content) {
            text.content = text.content.replace(/\n$/, '')
        }
        onChange?.({
            attachmentList: newAttachmentList as any,
            text
        })
    }

    return <Space style={{ width: '100%' }} direction='vertical'>
        <TextEditor
            maxStr={2000}
            value={textContent || ''}
            onChange={(value) => {
                setTextContent(value)
                handleChange(value, attachmentList)
            }}
        />
        <Space>
            <span>附件：</span>
            <Radio.Group
                defaultValue={'image'}
                value={type}
                onChange={(e) => {
                    const v = e.target.value
                    setType(v)
                    setDataNum(v !== 'image' ? 1 : 9)
                    const noArr = types.filter(i => i.value !== v).map(item => item.value)
                    setNoShowType([...noArr, 'text'])
                    setAttachmentList([])
                    handleChange(textContent, [])
                }} >
                {
                    types?.map((item, index) => {
                        if (item.label === '图片' || item.label === '视频' || item.label === '链接') {
                            return <Radio value={item.value} key={item.value || index}>{item.label}</Radio>
                        }
                    })
                }
            </Radio.Group>
        </Space>
        <MaterialMould
            dataNum={dataNum}
            noShowType={noShowType}
            type={type}
            textCount={1}
            mediaSize={mediaSizeObj[type as keyof typeof mediaSizeObj] as any || null}
            value={attachmentList}
            onChange={(value) => {
                if (value?.length > 0) {
                    const newText: TASK_CREATE.MediaContentProps[] = []
                    const newAttachmentList: TASK_CREATE.MediaContentProps[] = []
                    value?.forEach((cur: TASK_CREATE.MediaContentProps) => {
                        if (cur.mediaType === 'text') {
                            newText.push(cur)
                        } else {
                            newAttachmentList.push(cur)
                        }
                    })
                    if (newText.length > 0) {
                        if (textContent) {
                            setTextContent('')
                            setAttachmentList(newAttachmentList)
                            handleChange(newText[0].textContent, newAttachmentList)
                        } else {
                            setTextContent('')
                            setAttachmentList(newAttachmentList)
                            handleChange(newText[0].textContent, newAttachmentList)
                        }
                    } else {
                        setAttachmentList(value)
                        handleChange(textContent, value)
                    }
                } else {
                    setAttachmentList([])
                    handleChange(textContent, [])
                }
            }} 
        />
    </Space>
}

export default React.memo(MaterialFriendsNoTextMould)