import useNewToken from "@/Hook/useNewToken"
import { Checkbox, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { MediaContentProps, MediaTypeProps } from "../../API/weMaterial/weMaterial"
import AudioNews from "../newsMould/audioNews"
import FileNews from "../newsMould/fileNews"
import ImgNews from "../newsMould/imgNews"
import LinkNews from "../newsMould/linkNews"
import MiniprogramNews from "../newsMould/miniprogramNews"
import TextNews from "../newsMould/textNews"
import VideoNews from "../newsMould/videoNews"
import style from './index.less'
import { MediaSize } from "./uploadButton"

interface Props {
    data: MediaContentProps[]
    /**开启值选择 开启后 kxLength onChange 需使用*/
    isOpenData?: boolean,
    /** 可选长度 */
    kxLength?: number
    /** 回调函数 */
    onChange?: (data?: MediaContentProps[]) => void
    /**类型 传类型  其它不可选*/
    type?: MediaTypeProps
    noShowType?: Array<'text' | 'video' | 'file' | 'link' | 'voice' | 'miniprogram' | 'sck' | 'image'>,//不可使用的素材
    textCount?: number,  // 可选文案数量
    mediaSize?: MediaSize
}
/**
 * 消息详情查看组件
 * @returns 
 */
const LookBox: React.FC<Props> = ({ data, isOpenData, kxLength, onChange, type, noShowType, mediaSize, textCount }) => {
    console.log('noShowType--------->', noShowType)
    /***************************/
    const { token } = useNewToken()
    const [selectData, setSelectData] = useState<MediaContentProps[]>([])
    /***************************/

    useEffect(() => {
        if (isOpenData && kxLength && kxLength !== 0 && data) {
            const newData: MediaContentProps[] = JSON.parse(JSON.stringify(data))
            let newSelectData: MediaContentProps[] = []
            if (noShowType) {
                newSelectData = newData.filter(item => !(item?.mediaType && noShowType.includes(item.mediaType)))
                newSelectData = newSelectData.length > kxLength ? newSelectData.splice(0, kxLength) : newSelectData
            } else if (type) {
                newSelectData = newData.filter(item => item.mediaType === type)
                newSelectData = newSelectData.length > kxLength ? newSelectData.splice(0, kxLength) : newSelectData
            } else {
                newSelectData = newData.length > kxLength ? newData.splice(0, kxLength) : data
            }
            if (mediaSize) {
                newSelectData = newSelectData.filter(item => {
                    if (item.mediaType === 'text') {
                        return true
                    }
                    if (mediaSize?.size && mediaSize?.evalS && item.mediaSize && eval(`${item.mediaSize} ${mediaSize?.evalS} ${mediaSize.size}`)) {
                        return false
                    } else if (mediaSize?.duration && mediaSize?.evalD && (item.mediaPlayTime && eval(`${item.mediaPlayTime} ${mediaSize?.evalD} ${mediaSize.duration}`))) {
                        return false
                    } if ((mediaSize?.width && item.mediaWidth && eval(`${item.mediaWidth} ${mediaSize.evalW} ${mediaSize?.width}`)) || (mediaSize?.height && item.mediaHeight && eval(`${item.mediaHeight} ${mediaSize?.evalH} ${mediaSize?.height}`))) {
                        return false
                    } else {
                        return true
                    }
                })
            }
            // 处理文案
            if (textCount && newSelectData && newSelectData.filter(item => item.mediaType === 'text').length > textCount) {
                newSelectData = newSelectData.reduce((pre: MediaContentProps[], cur) => {
                    if (cur.mediaType !== 'text') {
                        pre.push(cur)
                    } else {
                        if (pre.filter(item => item.mediaType === 'text').length < textCount) {
                            pre.push(cur)
                        }
                    }
                    return pre
                }, [])
            }
            setSelectData(newSelectData)
            onChange?.(newSelectData)
        }
    }, [isOpenData, kxLength, data, type, mediaSize, textCount])


    const selectHandle = (data: MediaContentProps, checked: boolean) => {
        if (checked) {
            let newData = selectData.filter(item => item.id !== data.id)
            setSelectData(newData)
            onChange?.(newData)
        } else {
            setSelectData([...selectData, data])
            onChange?.([...selectData, data])
        }
    }

    return <div className={style.lookBox}>
        {data?.map((item, index) => {
            const checked = selectData.some(data => data.id === item.id)
            let disabled = (checked ? false : kxLength ? !(kxLength - selectData.length) : true) || (noShowType && item.mediaType && noShowType.includes(item.mediaType)) || (textCount ? item.mediaType === 'text' ? false : (type && item.mediaType !== type) : (type && item.mediaType !== type))
            if (!disabled && mediaSize) {
                if (item.mediaType === 'text') {
                    disabled = false
                }
                if (mediaSize?.size && mediaSize?.evalS && item.mediaSize && eval(`${item.mediaSize} ${mediaSize?.evalS} ${mediaSize.size}`)) {
                    disabled = true
                } else if (mediaSize?.duration && mediaSize?.evalD && (item.mediaPlayTime && eval(`${item.mediaPlayTime} ${mediaSize?.evalD} ${mediaSize.duration}`))) {
                    disabled = true
                }
                if ((mediaSize?.width && item.mediaWidth && eval(`${item.mediaWidth} ${mediaSize.evalW} ${mediaSize?.width}`)) || (mediaSize?.height && item.mediaHeight && eval(`${item.mediaHeight} ${mediaSize?.evalH} ${mediaSize?.height}`))) {
                    disabled = true
                } else {
                    disabled = false
                }
            }
            if (!disabled && textCount && item.mediaType === 'text' && !checked && selectData.filter(item => item.mediaType === 'text').length >= textCount) {
                disabled = true
            }
            if (kxLength && selectData.length >= kxLength && !checked) {
                disabled = true
            }
            return <div key={index} className={style.lookBox_item}>
                <Tag style={{ borderRadius: '50%' }} color={token.colorPrimaryHover}>{index + 1}</Tag>
                {isOpenData && <Checkbox disabled={disabled} onChange={() => selectHandle(item, checked)} checked={checked}></Checkbox>}
                {item.mediaType === 'text' ? <TextNews style={{ marginBottom: 0 }} strong msg={item?.textContent || ''} />
                    : item.mediaType === 'image' ? <ImgNews src={item?.imageUrl} preview />
                        : item.mediaType === 'video' ? <VideoNews src={item?.videoUrl} preview />
                            : item.mediaType === 'voice' ? <AudioNews url={item?.voiceUrl} times={item.mediaPlayTime} />
                                : item.mediaType === 'miniprogram' ? <MiniprogramNews {...item} isDetails />
                                    : item.mediaType === 'link' ? <LinkNews width={240} isBlank content={{ url: item.linkUrl as string, title: item.linkTitle as string, desc: item.linkDesc as string, cover: item.linkPicurl as string }} />
                                        : item.mediaType === 'file' ? <FileNews width={225} fileName={item?.fileName} fileSize={item.mediaSize} fileUrl={item.fileUrl} />
                                            : null}
            </div>
        })}
    </div>
}

export default React.memo(LookBox)