
import useNewToken from '@/Hook/useNewToken'
import { Typography } from 'antd'
import { BlockProps } from 'antd/es/typography/Base'
import { useEffect, useState } from 'react'
import { emoList } from '../textEditor/Expression'
import style from './index.less'

export interface Props extends BlockProps {
    msg: string
}
/**
 * 消息文本
 * @param param0 
 */
const TextNews: React.FC<Props> = ({ msg = '', ...data }) => {

    /*************************/
    const { token } = useNewToken()
    const [text, setText] = useState('')
    /*************************/

    useEffect(() => {
        let newValue = msg
        const newEmo = emoList.reduce((prev, cur) => {
            return [...prev, ...cur]
        }, [])
        const emos = newValue.match(/\[[\u4e00-\u9fa5]+\]/g)
        if (emos && emos?.length) {
            emos.forEach(emo => {
                const 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;vertical-align: bottom;"/>`)
                }
            })
        }
        setText(newValue?.replaceAll('\n', '<br/>'))
    }, [msg])

    return <div
        className={style.textNews}
        style={{
            backgroundColor: token.colorBgContainer,
            borderRadius: token.borderRadius,
            border: `1px solid ${token.colorBorder}`
        }}>
        <Typography.Paragraph {...data}><span dangerouslySetInnerHTML={{ __html: text }} /></Typography.Paragraph>
    </div>
}

export default TextNews