import useNewToken from "@/Hook/useNewToken"
import { Avatar, Typography } from "antd"
import React, { useEffect, useRef, useState } from "react"
import { MediaContentProps } 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 VideoNews from "../newsMould/videoNews"
import style from './index.less'
import { UserOutlined } from '@ant-design/icons';
import { emoList } from "../textEditor/Expression"
import { useSize } from "ahooks"

interface Props {
    content: {
        text?: string
        data?: MediaContentProps[]
    },
    title?: string
    subTitle?: string
    avatar?: string
}

const LookPyq: React.FC<Props> = ({ content, title, subTitle, avatar }) => {

    /********************************/
    const { token } = useNewToken()
    const [text, setText] = useState('')
    const [length, setLength] = useState<number>(0)
    const ref = useRef<HTMLDivElement>(null)
    const size = useSize(ref)
    /********************************/

    useEffect(() => {
        if (content?.data && Array.isArray(content?.data)) {
            setLength(content?.data?.length)
        }
    }, [content?.data])

    useEffect(() => {
        let newValue = content?.text || ''
        let newEmo = emoList.reduce((prev, cur) => {
            return [...prev, ...cur]
        }, [])
        let emos = newValue.match(/\[[\u4e00-\u9fa5]+\]/g)
        if (emos && emos?.length) {
            emos.forEach(emo => {
                let emoData = newEmo.find(o => `[${o.name}]` === emo)
                if (emoData) {
                    newValue = newValue.replace(emo, `<img src="${emoData.url}" alt="${emoData.name}" style="width:20px;height:20px"/>`)
                }
            })
        }
        setText(newValue?.replaceAll('\n', '<br/>'))
    }, [content?.text])

    return <div className={style.lookPyq}>
        <div className={style.lookPyq_item} style={{ padding: token.padding, borderBottom: `1px solid ${token.colorBorderSecondary}` }}>
            <Avatar shape="square" src={avatar} icon={<UserOutlined />} />
            <div className={style.left} ref={ref}>
                <div className={style.name}>
                    <Typography.Title level={5} style={{ margin: 0, lineHeight: 'normal' }}>{title}</Typography.Title>
                    <Typography.Text style={{ margin: 0, lineHeight: 'normal' }} type="warning">{subTitle}</Typography.Text>
                </div>
                <Typography.Text><span dangerouslySetInnerHTML={{ __html: text }} style={{ textAlign: 'left', display: 'block' }} /></Typography.Text>
                <div className={style.scBox}>
                    {content?.data?.map((item, index) => {
                        return <div key={index} className={style.scBox_item} style={{ width: length === 1 ? '100%' : length === 2 ? '50%' : length === 3 ? '33.333%' : length === 4 ? '50%' : '33.333%', textAlign: 'left' }}>
                            {item?.mediaType === 'image' && size?.width ? <ImgNews
                                src={item?.imageUrl}
                                preview
                                imgStyle={{
                                    objectFit: 'cover',
                                    width: length === 1 ? 250 : length === 2 ? size?.width / 2 : length === 3 ? size?.width / 3 : length === 4 ? size?.width / 2 : size?.width / 3,
                                    height: length === 1 ? 250 : length === 2 ? size?.width / 2 : length === 3 ? size?.width / 3 : length === 4 ? size?.width / 2 : size?.width / 3,
                                }}
                            />
                                : 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' && size?.width ? <LinkNews width={size?.width - 5} 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' && size?.width ? <FileNews width={size?.width - 20} fileName={item?.fileName} fileSize={item.mediaSize} fileUrl={item.fileUrl} />
                                                    : null}
                        </div>
                    })}
                </div>
                <div className={style.footer}>
                    <Typography.Text type="secondary" style={{ margin: 0, lineHeight: 'normal' }}>刚刚</Typography.Text>
                    <div style={{ padding: '0 8px', borderRadius: token.borderRadius, display: 'flex', alignItems: 'center', gap: 3, background: token.colorBgTextHover }}>
                        <div style={{ width: 3, height: 3, borderRadius: 2, background: token.colorTextBase }}></div>
                        <div style={{ width: 3, height: 3, borderRadius: 2, background: token.colorTextBase }}></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

export default React.memo(LookPyq)